variable-lime

File Based Router - Layouts

Hey! Are there next.js style layouts with the file based router? For example I'd want certain routes to have a navbar, certain routes to not have one but not wrap every page with a component manually For some reason getParentRoute is not a prop of FileRoute so I'm not sure how to do it

8 Replies

ratty-blush•2y ago

I think that's just done using convention with the FileRoute. _with-nav.posts.tsx vs _layout.users.tsx. You'd then have a _with-nav.tsx which exposes an <Outlet />

variable-limeOP•2y ago

Interesting so I got it to work with the following structure

├── __root.tsx
├── index.tsx
├── onboarding
│   ├── email
│   │   └── index.tsx
│   ├── name
│   │   └── index.tsx
│   └── newsletter
│       └── index.tsx
└── onboarding.tsx

├── __root.tsx
├── index.tsx
├── onboarding
│   ├── email
│   │   └── index.tsx
│   ├── name
│   │   └── index.tsx
│   └── newsletter
│       └── index.tsx
└── onboarding.tsx

However this does not work

.
├── __root.tsx
├── index.tsx
└── onboarding
    ├── index.tsx
    ├── email
    │   └── index.tsx
    ├── name
    │   └── index.tsx
    └── newsletter
        └── index.tsx

.
├── __root.tsx
├── index.tsx
└── onboarding
    ├── index.tsx
    ├── email
    │   └── index.tsx
    ├── name
    │   └── index.tsx
    └── newsletter
        └── index.tsx

I tried _index.tsx as well as index_.tsx, im not sure why that doesnt work Any ideas @Eric Chernuka ?

ratty-blush•2y ago

Ya so the docs indicate this here: https://tanstack.com/router/v1/docs/api/router-cli#nested-configuration If you look at the _layout convention you need a top level file (the layout you want used) then a folder of the same name and anything under that will use the _layout component as its pathless layout.

Router CLI (Route Generation) | TanStack Router Docs

After installing the @tanstack/router-cli package via NPM, the tsr CLI command (stands for TanStack Router) will be available. It is designed to automatically generate route configurations from file-based route structure. Users can either generate the routes manually or continuously watch the project and regenerate routes accordingly. The CLI s...

ratty-blush•2y ago

In your second example the index.tsx I believe is just to the / route where the __root can be a wrapper around it. That one I'm a bit unsure of tbh cause it seems like root/index share the same responbilities.

metropolitan-bronze•2y ago

Correct me if I'm wrong, but this still creates a route at /onboarding correct? My guess is that you don't want users to be able to visit this "naked" route, instead only be able to visit /onboarding/{email|name|newsletter} correct?

rival-black•2y ago

I am struggling with the same issue. For me the rendering part works flawlessly so I understood that I have to wrap the same folder name like

_layout.tsx and _layout/dashboard.component.tsx

_layout.tsx and _layout/dashboard.component.tsx

This seems to work perfectly, but what doesn't work is typings of <Link to="/dashboard" /> . I receive a TS error that /dashboard does not exists. Anyone has an idea what I might miss? I am using file based routing

rival-black•2y ago

this are the basic files I created.

rival-black•2y ago

It was my mistake.. I mixed up file and code based imports now everything works as expected

Gaming

Programming

File Based Router - Layouts

Did you find this page helpful?