flat-fuchsia

Url as /posts/1/comments but folder structure as /posts/comments

Hi, I came across this route structure in the TanStack Router documentation: https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes Example structure: /routes ├── root.tsx ├── index.tsx ├── pathlessLayout.tsx ├── app │ ├── dashboard.tsx │ ├── dashboard-index.tsx │ ├── dashboard-invoices.tsx │ ├── invoices-index.tsx │ ├── invoice-detail.tsx └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── comments/ │ ├── index.tsx │ ├── $commentId.tsx └── likes/ ├── index.tsx ├── $likeId.tsx I want to follow a similar structure for displaying posts and their comments: └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── comments/ ├── index.tsx ├── $commentId.tsx My goal is to support URLs like: /posts/1/comments However, to make that URL pattern work with TanStack Router, I’ve found I need to nest the comments/ folder under a dynamic segment like this: └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── $postId.comments/ ├── index.tsx ├── $commentId.tsx But I’d really prefer to avoid having the directory named $postId.comments/. Is there a way to keep the folder name as just comments/, but still have the route structure support /posts/1/comments?

Virtual File Routes | TanStack Router React Docs

We'd like to thank the Remix team for . We've taken inspiration from their work and adapted it to work with TanStack Router's existing file-based route-tree generation. Virtual file routes are a power...

21 Replies

sunny-green•3mo ago

You could make a $postId folder

posts
  - index.tsx
  - $postId
      - index.tsx
      - edit.tsx
      - comments
          - index.tsx
          - $commentId.tsx

posts
  - index.tsx
  - $postId
      - index.tsx
      - edit.tsx
      - comments
          - index.tsx
          - $commentId.tsx

flat-fuchsiaOP•3mo ago

I’d like to avoid placing comments inside $postId because my actual route structure is much deeper, and it's getting hard to manage.

sunny-green•3mo ago

I think those are your only 2 options with file routing. Either deep folders and short file names, or long file names and shallow folders.

flat-fuchsiaOP•3mo ago

But if you look at the docs in https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes they mount /posts as directory and how does the comments works in that case? └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── comments/ │ ├── index.tsx │ ├── $commentId.tsx

Virtual File Routes | TanStack Router React Docs

sunny-green•3mo ago

My understanding of that structure is that it would not create a posts/$postId/comments/$commentId URL we would have /posts /posts/$postId /posts/$postId/edit /posts/comments /posts/comments/$commentId

flat-fuchsiaOP•3mo ago

Ok, would be nice to find the source code of that structure.

optimistic-gold•3mo ago

I don't understand the whole thread 🤪 the point of virtual file routes is to decouple file names / folder structure from routing setup so you can have have any folder structure / file naming you want you "just" need to define your route structure using the virtualRouteConfig are you using virtual file routes?

flat-fuchsiaOP•3mo ago

I found in the docs "Physical Virtual Routes" a route organization that I would like to use: └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── comments/ ├── index.tsx ├── $commentId.tsx This structure is in the docs and is mounted using physical('/posts', 'posts'), The question is if I could use this structure specially having "comments/" as a folder directly under "posts/" but been able to pass the post id for the comments, like /posts/1/comments. The goal would be to have directories like "posts" and "comments" as containers and everything inside "posts" related to posts as files like $postId.edit.tsx and index.tsx. The thing that I was trying to avoid was to have a directory named like "$postId.comments" or "$postId", this in my view is mixing "posts related stuff with comments".

optimistic-gold•3mo ago

if you want to use "physical" file routes, then no i dont see the problem with that though

└── posts
    ├── index.tsx
    ├── $postId.tsx
    ├── $postId.edit.tsx
    ├── $postId/
        ├── comments/
             ├── index.tsx
             ├── $commentId.tsx

└── posts
    ├── index.tsx
    ├── $postId.tsx
    ├── $postId.edit.tsx
    ├── $postId/
        ├── comments/
             ├── index.tsx
             ├── $commentId.tsx

if you want to have comments that belong to a $postId, nest it under there

flat-fuchsiaOP•3mo ago

This is how I have and it works, but I think having comments below posts as in the DOCs example would be cleaner. Do you know if that example of structure is available in the GitHub, I am curious to see how this would work? └── posts ├── index.tsx ├── $postId.tsx ├── $postId.edit.tsx ├── comments/ ├── index.tsx ├── $commentId.tsx

optimistic-gold•3mo ago

no this example is just in the docs PR to the docs welcome to fix this!

flat-fuchsiaOP•3mo ago

Ok, thanks for the help. If I find a good way to do that I will do a PR @Manuel Schiller I am looking at "virtual.ts" trying to create the route the way I want with that. But when I added the file and restarted with npm run dev. I got: Route file "import { defineVirtualSubtreeConfig, index, route, } from '@tanstack/virtual-file-routes'
export default defineVirtualSubtreeConfig([ index('home.tsx'), route('$id', 'detail.tsx'), ])" does not export any route piece. This is likely a mistake. I installed @tanstack/virtual-file-routes and just added the "virtual.ts" inside my /posts folder. Is there any thing else that need to be done? @Manuel Schiller I am looking at virtual.ts trying to create the route the way I want with that. But when I added the file and restarted with npm run dev. I got: Route file "import { defineVirtualSubtreeConfig, index, route, } from '@tanstack/virtual-file-routes'
export default defineVirtualSubtreeConfig([ index('home.tsx'), route('$id', 'detail.tsx'), ])" does not export any route piece. This is likely a mistake. I installed @tanstack/virtual-file-routes and just added the virtual.ts inside my /posts folder. Is there any thing else that need to be done?

optimistic-gold•3mo ago

that's hard to read 😄

flat-fuchsiaOP•3mo ago

I add double underscore virtuals.ts but Discord changed the message

optimistic-gold•3mo ago

put it in backticks __virtual.ts

flat-fuchsiaOP•3mo ago

I am looking at __virtual.ts trying to create the route the way I want with that. But when I added the file and restarted with npm run dev. I got: Route file "import { defineVirtualSubtreeConfig, index, route, } from '@tanstack/virtual-file-routes' export default defineVirtualSubtreeConfig([ index('home.tsx'), route('$id', 'detail.tsx'), ])" does not export any route piece. This is likely a mistake. I installed @tanstack/virtual-file-routes and just added the __virtual.ts inside my /posts folder. Is there any thing else that need to be done?

optimistic-gold•3mo ago

it works in this example https://github.com/TanStack/router/blob/main/examples/react/basic-virtual-inside-file-based/src/routes/posts/__virtual.ts

flat-fuchsiaOP•3mo ago

@Manuel Schiller sorry my bad the file is __virtual.ts not virtuals

optimistic-gold•3mo ago

so you did not name it correctly?

flat-fuchsiaOP•3mo ago

I added __virtuals.ts with an s by mistake

optimistic-gold•3mo ago

so it works with the correct name?

Gaming

Programming

Url as /posts/1/comments but folder structure as /posts/comments

Did you find this page helpful?