optimistic-gold

File-based directory routes not working

Hi, I'm trying to set up a sample project similar to the layout in this example: https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#mixed-flat-and-directory-routes So I have a posts directory with: - $postId.tsx - $postId.edit.tsx I'm able to navigate to /posts/1 just fine. But if I go to /posts/1/edit it will go to $postId.tsx instead of $postId.edit.tsx. If I move $postId.edit.tsx up and rename it to posts_.$postId.edit.tsx it works, but I want to keep things organized like they are in the docs. Any ideas?

16 Replies

quickest-silver•14mo ago

you can also name your directory posts.$postId/ then having only index.tsx and edit.tsx inside just pointing this out can you provide the exact structure of your files? Is it just

- posts/
  - $postId.tsx
  - $postId.edit.tsx

- posts/
  - $postId.tsx
  - $postId.edit.tsx

optimistic-goldOP•14mo ago

got it, good to know. and yes that's the exact structure

quickest-silver•14mo ago

do you use any pathless (files starting with _) or route.tsx files anywhere before this part of the route tree?

optimistic-goldOP•14mo ago

nope just __root.tsx

.
├── __root.tsx
├── about.tsx
├── index.tsx
└── posts
    ├── $id.edit.tsx
    └── $id.tsx

.
├── __root.tsx
├── about.tsx
├── index.tsx
└── posts
    ├── $id.edit.tsx
    └── $id.tsx

quickest-silver•14mo ago

that should have worked, let me open my laptop and try it in a blitzstack example

optimistic-goldOP•14mo ago

it seems if i put an <Outlet /> inside posts/$id.tsx it will render the $id.edit.tsx, but i was hoping not to have to do that

quickest-silver•14mo ago

actually, i got it why this is happening edit is nested inside of $id, and $id acts like a layout for it you either have to rename $id.tsx to $id.index.tsx, or use the other approach i gave you if you have routes like

user.tsx
user.something.tsx

user.tsx
user.something.tsx

user.tsx acts like a layout for user.something.tsx

optimistic-goldOP•14mo ago

oh interesting that does work for me now

quickest-silver•14mo ago

i'd recommend using the other way, doing posts.$postId/ then, if you need to parse the type of $postId using params.parse and params.stringify, you can do it inside of posts.$postId/route.tsx and it will be inferred in all other routes nested under that folder or, you could also use $postId.route.tsx and parse it there actually but tbh I prefer using files only for what I call "leaf routes" and have everything else be folders

optimistic-goldOP•14mo ago

yeah i think i'd prefer to use files for leaf nodes as well keeps it simpler

quickest-silver•14mo ago

tbh, actually, i realized i would have ran into the same issue as you, but usually i do not have "view" routes, I only have list, create, edit so, a common boilerplate could look smth like

- _Auth/
  - posts/
    - $postId/
      - index.tsx // Posts view
      - edit.tsx
    - index.tsx // Posts list
    - create.tsx
  - route.tsx // Layouting and auth guard to redirect to login if not authenticated
- (Public)/
  - ... // Routes that do not require authentication

- _Auth/
  - posts/
    - $postId/
      - index.tsx // Posts view
      - edit.tsx
    - index.tsx // Posts list
    - create.tsx
  - route.tsx // Layouting and auth guard to redirect to login if not authenticated
- (Public)/
  - ... // Routes that do not require authentication

also, before you run into other pitfalls, having

some-folder/
  route.tsx

some-folder/
  route.tsx

is same as having the some-folder.tsx file, this way you can keep layouts colocated with the files they apply to

optimistic-goldOP•14mo ago

yeah i had this idea that the files inside folders were like pages, so i had assumed the character parsing didn't apply to them

quickest-silver•14mo ago

and, if you want to make sure a route works ONLY as a leaf, and wont wrap other routes, append .index

optimistic-goldOP•14mo ago

but this makes a lot more sense now

quickest-silver•14mo ago

there are also "virtual file routes" if you ever want to bail out of tanstack router's file naming standard and want to make your own, but you need to define each route manually there for example, what I saw recently, someone wanted routes that start with _ which is not possible, as tanstack router treats any route starting with _ as a pathless route, but you can do that with virtual file routes by defining that route there and using physical(...) to mount the rest of your file routes

optimistic-goldOP•14mo ago

gotcha, i'll most likely just stick to the default tanstack behavior. but that's good to know if i need something more advanced thanks a lot for your help @ferretwithabéret , i really appreciate your time

Gaming

Programming

File-based directory routes not working

Did you find this page helpful?