TanStackT
TanStack•2y ago•
1 reply
dual-salmon

Layout route with `routeFilePrefix `

I'm using vite plugin to generate routes from files

How do I create layout route when using routeFilePrefix?

I have following folder structure?

.
├── +__root.tsx
├── +index.tsx
├── +workers
│   ├── +_layout.tsx
│   └── +dashboard
│       ├── +index.tsx


Basically I want all routes under +workers to be inside wrapped by +_layout route and display 404 if it's not matched. I can't seem to get it working...

Example:
1. If I visit /workers/dashboard/ -> +workers/+dashboard/+index.tsx (inside +_layout)
2. If I visit /workers/ -> display 404

It works like this 

.
├── +__root.tsx
├── +index.tsx
├── +workers
│   ├── +route.tsx
│   └── +dashboard
│       ├── +index.tsx


But it makes /workers -> a valid route which will display empty page but I want it to be 404 in this case

My +_layout route:

import { Outlet, createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/workers/_layout')({
  component: LayoutComponent,
});

function LayoutComponent() {
  return (
  <div>
    <h1>Layout</h1>
      <Outlet />
    </div>
  );
}


Here's my config:

{
  quoteStyle: 'single',
  routesDirectory: './src/routes',
  generatedRouteTree: './src/route-tree.gen.ts',
  routeFilePrefix: '+',
}
Was this page helpful?