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

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

+workers

to be inside wrapped by

+_layout

+_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/

+workers/+dashboard/+index.tsx

+workers/+dashboard/+index.tsx

(inside

+_layout

+_layout

)
2. If I visit

/workers/

/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

/workers

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

My

+_layout

+_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: '+',
}

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

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

+workers

to be inside wrapped by

+_layout

+_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/

+workers/+dashboard/+index.tsx

+workers/+dashboard/+index.tsx

(inside

+_layout

+_layout

)
2. If I visit

/workers/

/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

/workers

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

My

+_layout

+_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: '+',
}

Layout route with `routeFilePrefix `

Similar Threads

Layout route with `routeFilePrefix `

Similar Threads

Similar Threads

Similar Threads