TanStack•2y ago•

10 replies

urgent-maroon

How to create a "root" layout?

I was looking through the various TSR examples and noticed several that had

__root.tsx

__root.tsx

file as well as an

_layout.tsx

_layout.tsx

file in the root of the

/routes

/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

_layout

routes, I was expecting the JSX in

/routes/_layout.tsx

/routes/_layout.tsx

to be rendered by the

__root

__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

/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

/routes/__root.tsx

and

/routes/index.tsx

/routes/index.tsx

?

I was hoping to use the

/routes/_layout.tsx

/routes/_layout.tsx

file to contain the actual UI layout for the entire app, and then I would just keep the

/routes/__root.tsx

/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 routes

React 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.

TanStack•2y ago•

10 replies

urgent-maroon

How to create a "root" layout?

I was looking through the various TSR examples and noticed several that had

__root.tsx

__root.tsx

file as well as an

_layout.tsx

_layout.tsx

file in the root of the

/routes

/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

_layout

routes, I was expecting the JSX in

/routes/_layout.tsx

/routes/_layout.tsx

to be rendered by the

__root

__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

/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

/routes/__root.tsx

and

/routes/index.tsx

/routes/index.tsx

?

I was hoping to use the

/routes/_layout.tsx

/routes/_layout.tsx

file to contain the actual UI layout for the entire app, and then I would just keep the

/routes/__root.tsx

/routes/__root.tsx

React 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.

How to create a "root" layout?

Similar Threads

How to create a "root" layout?

Similar Threads

Similar Threads

Similar Threads