TanStackT
TanStack•2y ago•
5 replies
popular-magenta

Nested route group navigation

I have the following file-based structure:

/user/$id
  - route.tsx - layout file for users
  (user-tabs) - a collection of tabs displayed in /user/$id/route.tsx
      - tab-a.tsx
      - tab-b
          - route.tsx - layout file for tab-2
          - (tab-2-tabs) - another collection of tabs displayed in `/user/$id/tab-2.route.tsx
              - sub-tab-1.tsx
              - sub-tab-2.tsx
      - tab-c.tsx


I have a few questions:
1. How can I set a default tab to be navigated to? My current solution is to directly link to tab-a from /user/$id/route.tsx. I know there's a Navigate component and useNavigate but I'm not sure what's best practice.
2. How can I access the tab (and sub-tab) id? For example, when the user refreshes the page, I want to navigate them to that tab (and have it be shown as active). My current solution is to split location.pathname but it's not type-safe and it seems wonky.

Thank you!
Was this page helpful?