T
TanStack•6mo ago
ambitious-aqua

How to model routes for Tabs component

Let's say I have the following routes: /machine/123/tickets /machine/123/pricing My current folder structure: /routes |-- /_app |---- /machine.$machineId |------ /_operational |-------- route.tsx I'm planning to use the Tabs component from ant-design (https://ant.design/components/tabs) , but I'm struggling with how I should model this in tanstack-router. Should the tab be a dynamic route segment ($tab), or should I use subfolders for all my tabs? The Tabs component from ant design recommends setting items=[tab1, tab2], not using children.
6 Replies
ratty-blush
ratty-blush•6mo ago
Use the antd Tabs without content, just for the tab bar. Navigate on tab change. For the structure 
- _Tabs/
  - route.tsx // Component that renders antd `Tabs` and `<Slot />`
  - other.tsx
  - pages.tsx
  - here.tsx
- _Tabs/
  - route.tsx // Component that renders antd `Tabs` and `<Slot />`
  - other.tsx
  - pages.tsx
  - here.tsx
To determine the activeKey you could try matching the route path, but be careful to dynamic parameters You'd pretty much use the route's path name as it's key and you'd pass the current path to the Tabs activeKey prop
ambitious-aqua
ambitious-aquaOP•6mo ago
Slot = Outlet I assume? You suggest to use the Tabs component only for the rendering of the tab itself, and then place a <Outlet /> below it and use child routes for each tab? That would mean that I loose the built in transitions in the tab component when changing tabs, and that inactive tabs would not be rendered until I navigate. 🤔 My instinct was that matching a dynamic $tab parameter would not be preferred? 🤔
ratty-blush
ratty-blush•6mo ago
Yeah, I am sorry, I worked a lot with react-native lately, and for expo-router it is called Slot I mean, you could also handle it with a single page, and change the activeKey with a path param or query param There are many ways to approach this, I did not know what you were going for
ambitious-aqua
ambitious-aquaOP•6mo ago
I'll have to do some testing, but my goal is that switiching tabs should be fast, and I think I want the content to be loaded but hidden to achieve this.
ambitious-aqua
ambitious-aquaOP•6mo ago
- The route "machine/123/tickets/new" should render a separate page without tabs. - The route "machine/123/tickets" should render a page with tabs. Would something like this work? Thanks for your input btw 🙏
No description
ratty-blush
ratty-blush•6mo ago
To be honest, I am not sure. I think it should work. you mean, you have /tickets once as a $tab, then /tickets/new.tsx and /tickets/$ticketId as separate routes I think it should work, as long as you will not create an index.tsx or route.tsx in tickets/ I am not sure tho, but this is my guess, as your current structure will not have any "collisions". With index.tsx or route.tsx your /tickets route will match both tickets/index.tsx (or route.tsx) and $tab/route.tsx but tickets/index.tsx will take precedence, as it is "more specific"

Did you find this page helpful?