T
TanStackā€¢4w ago
environmental-rose

Best way to handle tabs in TanStack Router ā€“ path or search param?

Hey everyone! šŸ‘‹ I'm building a page with multiple tabs using TanStack Router, and I'm trying to decide the best way to model the routing. Each tab shows different content, different components and possibly separate data fetching, while supporting deep linking. Iā€™m considering two options: Option 1: Use separate paths, which is used in the example code here, https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink?panel=code 
/dashboard
/dashboard/invoices
/dashboard/users
/dashboard
/dashboard/invoices
/dashboard/users
Option 2: Use search params 
/dashboard?tab=overview
/dashboard?tab=invoices
/dashboard?tab=users
/dashboard?tab=overview
/dashboard?tab=invoices
/dashboard?tab=users
Which approach would you recommend?
No description
2 Replies
harsh-harlequin
harsh-harlequinā€¢4w ago
In my opinion, this purely depends on where the tabs exist in your application tree. Are they tabs on a component such as a "box" on the dashboard or are they essentially a layout for the page? If your structure is like 
<Component />
<ComponentB />
<Tabs />
<ComponentC />
<ComponentD />
<Component />
<ComponentB />
<Tabs />
<ComponentC />
<ComponentD />
Then personally I would reach for search params, since it is just the state of one thing on the page. If your structure is like 
<Dashboard>
  <TabHeader>
    <TabA />
    <TabB />
    <TabC />
    <TabD />
  </TabHeader>
</Dashboard>
<Dashboard>
  <TabHeader>
    <TabA />
    <TabB />
    <TabC />
    <TabD />
  </TabHeader>
</Dashboard>
The to me that would likely be a route. --- Personally, I like to think of a route when the "main" body of the content is changing, whereas I think of search params when a portion or "thing' on the page is changing. A good example at my company is we have the following structure for our dashboard 
<Dashboard>
  <Banner />}
  <Account />
  <OverdueInvoices />
  <ServiceManager />
  <Tickets />
  <ServiceGroupsTable />
  <Invoices />
<Dashboard>
  <Banner />}
  <Account />
  <OverdueInvoices />
  <ServiceManager />
  <Tickets />
  <ServiceGroupsTable />
  <Invoices />
And the Service Manager is a tab component. We use search params for this since it's just one "component" on the page of many. If We had those other components inside the service manager as tabs, and the dashboard was essentially just a big tabs component, we probably would use routes
environmental-rose
environmental-roseOPā€¢4w ago
Thank you!

Did you find this page helpful?