Different routes using different layouts, while doing file based routing please?
For example route /a uses layout ./src/lib/layouts/One.tsx and routes /b and /c use layout /Two.tsx
I'd rather not just wrap the layout component in the route b/c then if we swap between pages that use the same layout state is lost
Thanks!
5 Replies
https://docs.solidjs.com/solid-start/building-your-application/routing#route-groups
+
https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts
Routing - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
Brilliant! ty!
i didn't see it mentioned in the articles (maybe it's not recommended?). the approach i've used is:
<Router>
<Route path="/" component={Home}>
<Route path="/" component={LandingPage} />
<Route path="/login" component={Login} />
</Route>
</Router>
in my Home component I have the line below where I want the children to be:
<div>{props.children}</div>
You can create multiple group like this
That’s also absolutely fine.
You are using the component based approach.
Peer showed the file routing approach.
Advantage of file based routing is automatic code splitting for each route
src/routes/(one).tsx --- Layout for (one) routes
src/routes/(one)/a.tsx. --- UI for ./a (which uses the one layout)
src/routes/(two).tsx. --- Layout for (two) routes
src/routes/(two)/b.tsx --- UI for ./b (which uses the two layout)
src/routes/(two)/c.tsx --- UI for ./c (which uses the two layout)
Is this the expected behavior please? if yes I'll make a small example b/c in my more complex current example I'm not seeing this behavior but I wanna ensure I'm interpreting this correctly first please, thanks!