How to define layout for index page?
I am looking to define a shared layout for some pages, according to the docs it seems like you would do something like this, and it does work if you are navigating manually to the page, but clicking links to the pages show an error "Failed to fetch dynamically imported module" where its trying to find "/routes/about.tsx" instead of "routes/(home)/about.tsx"
Is this a bug, or is there is another way to do it?
8 Replies
Use the root prop of the router in app.tsx to define the layout.
this would then apply the layout to the 404 page in this example no?
i essentially want layout for only some root routes and not others, which is what made me think the route group folder would work.
Yes.
Then create your layout component and share it between those pages that you want to use it.
Hi, Sorry to hijack the thread, but is there a way to break-out of root layout?
What I mean is... I'm already using the root prop, but like @michael said above, for some route (like the catchall 404 route), I need the component to be rendered directly instead of wrapped with the root layout.
Maybe something like
<Route layout={false|null} /> ?I feel like the route group is the intended solution but it does not seem to work well at the root
Yes, once
root prop is used, all routes will be wrapped using the root component ... which I think is a convenient since we don't need to repeat the thing for each routeoops i didnt see you were asking a different question
but yeah I just made my layout a component and used it on what I needed to use it
shouldnt be too much of a hassle unless you have a billion pages
root prop is a nice feature, but AS IS, it quickly became a blocker as soon as you need to exclude some routes from the root layout, or some routes need to use a different layout ...
That's why I'm asking a way to break-out of root prop, because IMO, without it the root component will contain a lot of conditional to satisfy all routes requirement
it will be easier to set a layout exception from a Route, than it is to satisfy layout requirements for all routes