generous-apricot

What is the correct way to set up these routes with a layout ?

Hi, I have a route called vadashboard and that route also has a _layout hierarchy goes as:

routes/
├── vadashboard.tsx              (Main route - client selector page)
├── vadashboard/
    ├── _layout.tsx                  (Layout wrapper for vadashboard routes)
    └── _layout/
        ├── index.tsx                (Default layout index)
        └── client_/                 (Dynamic client routes)
            └── $client/
                └── index.tsx        (Individual client dashboard page)

routes/
├── vadashboard.tsx              (Main route - client selector page)
├── vadashboard/
    ├── _layout.tsx                  (Layout wrapper for vadashboard routes)
    └── _layout/
        ├── index.tsx                (Default layout index)
        └── client_/                 (Dynamic client routes)
            └── $client/
                └── index.tsx        (Individual client dashboard page)

Basically what i want is that before we apply the layout, we have a first stop in the /vadashboard route is a dropdown where the user can select a client and once they select the client they get redirected. Redirection is not an issue but every time the user clicks on the client, the route becomes /vadashboard/client/Kf3x0Vh3yEaqxg2DTLcaDUjpCH0oF0xH, but what's rendered is still just the vadashboard.tsx route

4 Replies

conscious-sapphire•2mo ago

routes/           
├── vadashboard/
    ├── index.tsx (Main route - client selector page)
    ├── route.tsx (Layout wrapper for vadashboard routes)
    └── _layout/
        ├── route.tsx (Default layout index)
        └── client_/ (Dynamic client routes)
            └── $client/
                └── index.tsx (Individual client dashboard page)

routes/           
├── vadashboard/
    ├── index.tsx (Main route - client selector page)
    ├── route.tsx (Layout wrapper for vadashboard routes)
    └── _layout/
        ├── route.tsx (Default layout index)
        └── client_/ (Dynamic client routes)
            └── $client/
                └── index.tsx (Individual client dashboard page)

try this

conscious-sapphire•2mo ago

docs: https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#layout-routes

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...

generous-apricotOP•2mo ago

I see, i didn't realize there was a route.tsx that worked as a layout ended up doing:

routes/           
├── vadashboard/
    ├── index.tsx (Main route - client selector page)
    └── client/
        └── $client/ (Dynamic client routes)
            ├── route.tsx (layout)
            └── index.tsx (Individual client dashboard page)

routes/           
├── vadashboard/
    ├── index.tsx (Main route - client selector page)
    └── client/
        └── $client/ (Dynamic client routes)
            ├── route.tsx (layout)
            └── index.tsx (Individual client dashboard page)

quite simpler and it works. Thanks a lot!

conscious-sapphire•2mo ago

Nice. Glad to help!

Gaming

Programming

What is the correct way to set up these routes with a layout ?

Did you find this page helpful?