Two Questions about Wouter

[destocot]

Hello,

I learned about wouter recently and Ive been wondering about how to approach two things.

1. I have a modal to create tickets that can be accessed from any page. After submitting the ticket creation it will redirect to the new ticket
   so if im on "/tickets" ill redirect to "/tickets/NEW_TICKET_ID
   I use the [, navigate = useLocation() to achieve this with navigate(/tickets/${NEW_TICKET_ID})

but if im already on a ticket details page for example '/tickets/123abc' and i create a new ticket from that page
i wont get redirected? is this intended?

---

2. how would i approach layouts properly, i am currently attach a layout as a container to each individual pages like so

return (
    <>
      <Route path="/" component={HomePage} />
      <Route path="/tickets" component={TicketsPage} />
      <Route path="/tickets/:id" component={TicketDetailsPage} />
      <Route path="/signin" component={SigninPage} />
      <Route path="/signup" component={SignupPage} />
    </>
  );

and in each page I would do this
in SigninPage / SignupPage

return (
  <AuthLayout>
      ...
  </AuthLayout>
);  

and in all other pages

return (
  <MainLayout>
      ...
  </MainLayout>
);  

I was wondering if there was a way to do thsi with the router instead of adding it manually on each page.

thank you for reading and appreciate any help

[tfarhan00]

I'm rooting for this, hope this will get resolved

[molefrog]

Hi @destocot,

i create a new ticket from that page i wont get redirected? is this intended?

Could you clarify? Does it change the URL when you call setLocation()?

Regarding layouts, we don't have first-class support for it. However, you can extend the Route component like so:

const RouteWithLayout = ({ layout, component, ...props }) => {
  const Page = component; // component names should start with capital letter in React
  const Layout = layout;

  return <Route {...props}><Layout><Page /></Layout></Route>
}

<RouteWithLayout path="/signin" component={SigninPage} layout={AuthLayout} />

[destocot]

cant seem to replicate it / dont remeber what the exact issue was

however, appreciate the method for approaching layouts!