T
TanStack•2y ago
grumpy-cyan

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
.
├── +__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
.
├── +__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>
  );
}
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: '+',
}
{
  quoteStyle: 'single',
  routesDirectory: './src/routes',
  generatedRouteTree: './src/route-tree.gen.ts',
  routeFilePrefix: '+',
}
1 Reply
grumpy-cyan
grumpy-cyanOP•2y ago
Ok, we can do it like this: 
.
├── +__root.tsx
├── +_workers-layout
│   ├── +route.tsx
│   └── +workers
│       └── +dashboard
├── +index.tsx
.
├── +__root.tsx
├── +_workers-layout
│   ├── +route.tsx
│   └── +workers
│       └── +dashboard
├── +index.tsx

Did you find this page helpful?