I'm using React Router V7 in framework mode.

The goal is to put all related pages in a common folder, so that routes file doesn't extend linearly. We have a few namespaces: public, anization, admin. Under admin, we have a few pages related to the user, teams, etc.

I'm getting a 404 when I try to hit a page /admin/users, my directory structure is like this

• /routes
  • admin
    • index.tsx
    • users.tsx

I can hit the admin root page this way, and that works.

It also works fine if I set it up like

• /routes
  • admin.tsx
  • admin.users.tsx

Routes.ts has the following

import { type RouteConfig } from '@react-router/dev/routes';
import { flatRoutes } from '@react-router/fs-routes';

export default flatRoutes() satisfies RouteConfig;

When I look in the docs, they seem to indicate this is not possible

"all other modules in the folder will not become routes"

But I find this hard to believe and other googling seems to indicate this was all possible in earlier versions of react router and it seems like something that should be there.

I'm using React Router V7 in framework mode.

The goal is to put all related pages in a common folder, so that routes file doesn't extend linearly. We have a few namespaces: public, anization, admin. Under admin, we have a few pages related to the user, teams, etc.

I'm getting a 404 when I try to hit a page /admin/users, my directory structure is like this

• /routes
  • admin
    • index.tsx
    • users.tsx

I can hit the admin root page this way, and that works.

It also works fine if I set it up like

• /routes
  • admin.tsx
  • admin.users.tsx

Routes.ts has the following

import { type RouteConfig } from '@react-router/dev/routes';
import { flatRoutes } from '@react-router/fs-routes';

export default flatRoutes() satisfies RouteConfig;

When I look in the docs, they seem to indicate this is not possible

"all other modules in the folder will not become routes"

But I find this hard to believe and other googling seems to indicate this was all possible in earlier versions of react router and it seems like something that should be there.

• reactjs
• react-router

1 Answer 1

If you would like to use directories for anization then I believe you would need to name each directory for the route it defines, and rename the route component file for each route to route.tsx. There is a bit of an established naming convention for directory files. As the documentation states, other files in each directory do not contribute to routes the app uses.

app/
├── routes/
│   ├── admin/
│   │   ├── route.tsx
│   │   ├── ... other non-route files
│   ├── admin.users/
│   │   ├── route.tsx
│   │   ├── ... other non-route files