T
TanStack•2y ago
exotic-emerald

Nested Folder Index Routes

I am new to the TanStack Router. I can't figure out how nested folder index routes work. I want an Outlet for a route, with an index route. My route structure looks like this: - routes __root.tsx index.tsx - contributions index.tsx stats.tsx projects.tsx contributions/index.tsx includes an Outlet. I want stats.tsx to be the index route for contributions. See: https://codesandbox.io/p/devbox/white-rgb-c78vtp?file=%2Fsrc%2Froutes%2Fposts%2Findex.tsx%3A8%2C1
4 Replies
aware-green
aware-green•2y ago
For the contributions route, its index route would only be matched when you go to /contributions. However, when you go to /contributions/stats or /contributions/projects, you wouldn't be matching the index route anymore. For this, you'd use the route.tsx file to define any shared components or logic that wraps the all routes of /contributions path. That'd look like this. 
src/routes/
  __root.tsx
  index.tsx
  contributions/
    route.tsx <- shared layout commponent goes here
    index.tsx
    stats.tsx
    ...
src/routes/
  __root.tsx
  index.tsx
  contributions/
    route.tsx <- shared layout commponent goes here
    index.tsx
    stats.tsx
    ...
aware-green
aware-green•2y ago
aware-green
aware-green•2y ago
You can also see how the hierachy of rendering works here. See posts (dir) https://tanstack.com/router/latest/docs/framework/react/guide/route-trees#directory-routes
TanStack Router Docs
exotic-emerald
exotic-emeraldOP•2y ago
💯

Did you find this page helpful?