T
TanStack•11mo ago
correct-apricot

How would you translate this to directory routes ?

Hey I have these flat routes: 
- __root.tsx
- companies_.$id.agents.create.tsx
- companies_.$id.agents.tsx
- companies.create.tsx
- companies.tsx
- __root.tsx
- companies_.$id.agents.create.tsx
- companies_.$id.agents.tsx
- companies.create.tsx
- companies.tsx
How would you convert this to directory routes ? I tried but I have issues with the non-nested routes (_) not rendering in their own component tree.
6 Replies
correct-apricot
correct-apricotOP•11mo ago
It works by creating two separate folders like so: 
__root.tsx
companies/
  ...
companies_/
  ...
__root.tsx
companies/
  ...
companies_/
  ...
But is it the ideal solution ?
afraid-scarlet
afraid-scarlet•11mo ago
depends on your definition of "ideal" 😄 but how else would you tell router that the stuff beneath companies_ shall contain the companies in the path but not nest underneath it?
afraid-scarlet
afraid-scarlet•11mo ago
the only other other way I see is https://tanstack.com/router/v1/docs/framework/react/guide/virtual-file-routes
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...
correct-apricot
correct-apricotOP•11mo ago
Yea I see, I'll stick with the two folders solution @Manuel Schiller Sorry to bother you again, but I am curious, how would you accomplish this with virtual file routes ?
afraid-scarlet
afraid-scarlet•11mo ago
something like this 
import {
  rootRoute,
  route,
  index,
  layout,
  physical,
} from '@tanstack/virtual-file-routes';

export const virtualRouteConfig = rootRoute('root.tsx', [
  layout('companies-details', 'details.tsx', [
    route('/companies/$id/agents', 'agents.tsx'),
    route('/companies/$id/agents/create', 'create.tsx'),
  ]),
  layout('companies-layout', 'companies.tsx', [
    route('/companies/create', 'create.tsx']),
  ]),
]);
import {
  rootRoute,
  route,
  index,
  layout,
  physical,
} from '@tanstack/virtual-file-routes';

export const virtualRouteConfig = rootRoute('root.tsx', [
  layout('companies-details', 'details.tsx', [
    route('/companies/$id/agents', 'agents.tsx'),
    route('/companies/$id/agents/create', 'create.tsx'),
  ]),
  layout('companies-layout', 'companies.tsx', [
    route('/companies/create', 'create.tsx']),
  ]),
]);
you can of course omit the companies-details layout, this example is just showing how you can apply different layouts to similar paths
correct-apricot
correct-apricotOP•11mo ago
alright, thank you

Did you find this page helpful?