Why does route.tsx not working fine in a file-based router combined with virtual file router?

[cristi-shoreline]

👋 Hello, folks!

I'm having an issue combining the virtual file router with some file-based defined routes.

This is the example from the docs (simplified for clarity):

export const routes = rootRoute('root.tsx', [
  index('index.tsx'),
  
  // Mount the `posts` directory under the `/posts` path
  physical('/posts', 'posts'),
])

Now, in the posts directory, I have an index.tsx file which (correctly) generates the following code:

export const Route = createFileRoute('/posts/')({
  component: () => 'Posts',
});

However, I'd also like to match the route itself, /posts, not just the index, so the logical way to do it was to add a route.tsx (this works when using file-based routing without virtual file routes).

Adding it to the posts directory generates the exact same content, matching the index.

What I'm trying to get is the following:

export const Route = createFileRoute('/posts')({ // note the missing trailing slash
  component: () => (
    <div>
      <h1>Title<h1>
      <Outlet />
    </div>
  ),
});

Any idea on how to match the route in such a scenario?

[cristi-shoreline]

A workaround that I found is to:

1. Add a route.tsx to the posts folder
2. Define it as a child in the rootRoute
3. Set the ignore prefix in the vite.config.ts file as routeFileIgnorePrefix: 'route'

export const routes = rootRoute('root.tsx', [
  index('index.tsx'),
  
  // Add the folder "root" route
  route('/posts', 'posts/route.tsx'),
  
  // Mount the `posts` directory under the `/posts` path
  physical('/posts', 'posts'),
])

However, it still seems hacky, and I'm not entirely happy with this workaround.