How to create a "root" layout?
I was looking through the various TSR examples and noticed several that had
__root.tsx file as well as an _layout.tsx file in the root of the /routes directory, such as in the Kitchen Sink example https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based
Based on my understanding of the _layout routes, I was expecting the JSX in /routes/_layout.tsx to be rendered by the __root Outlet even on the index page, but that doesnt seem to be the case.
Am I correct in assuming that code from /routes/_layout.tsx file will only render for nested routes and wont actually apply to the root? In other words, the only components that will match on the root are whatever is in /routes/__root.tsx and /routes/index.tsx?
I was hoping to use the /routes/_layout.tsx file to contain the actual UI layout for the entire app, and then I would just keep the /routes/__root.tsx file as a place to perform JS logic and render and necessary providers. But it looks like i might need to put both my JS logic and the app layout into that root.tsx file. Not a huge deal if thats the case, I just wanted to make sure Im not misunderstanding layout routesReact TanStack Router Kitchen Sink React Query File Based Example |...
An example showing how to implement Kitchen Sink React Query File Based in React using TanStack Router.
7 Replies
foreign-sapphire•2y ago
The root route, is displayed at all times on all routes. There is not opting out of the root route.
Whilst, a layout route, only wraps its logic and components over a certain selection of routes.
If you want to you can add the components for the entire app, you could add it in the root route. Or you can create a layout for it, and add your routes in there, keeping the avenue open for adding more routes at the root level, without have to make big refactors.
I'd go for something like this:
If you've got some better verbiage about this behaviour with layout routes and the root route, we'd be happy to accepts any PRs on this.
quickest-silver•2y ago
What would be the proper way to create something like a signIn route where I don't want the root route to be included? Is there any way to do this?
foreign-sapphire•2y ago
The root route will always be rendered.
Your best bet would be to put all the routes that share the same layout and logic into a pathless/layout route.
Only put stuff in the root root if it should be present across ALL routes.
quickest-silver•2y ago
Got it, thanks!
One more thought on this - would this be easier with code-based routing than file-based? Or I’d run into the same thing no matter what
foreign-sapphire•2y ago
Nope its the same. The routing concepts don't change between either.
foreign-sapphire•2y ago
Routing Concepts | TanStack Router React Docs
TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease.
The Root Route
quickest-silver•2y ago
Thanks for the info. Appreciate the help!