Détecter les routes automatiquement (file-based-routing)

Dans tes projets React Router 7, tu as peut-être déjà éprouvé la lourdeur de déclarer manuellement chaque route dans app/routes.ts. Et si on automatisait tout ça ? Grâce au plugin remix-flat-routes, tu peux tirer parti du file-based routing inspiré de Remix et Next.js : tes fichiers et dossiers dans app/routes/ deviennent la source unique de vérité pour tes routes.

Pourquoi utiliser le file-based routing ?

• Gain de temps : plus besoin de mettre à jour routes.ts à chaque nouvelle page.
• Moins d’erreurs : la correspondance fichier ↔ URL suit une convention simple.
• Meilleure organisation : tes dossiers structurent directement ton URL, et vice versa.

Installation du plugin

1
npm install remix-flat-routes \
2
  @react-router/remix-routes-option-adapter

1
npm install

Configuration de app/routes.ts

On remplace le tableau statique par l’adaptateur remixRoutesOptionAdapter et flatRoutes :

1
import { type RouteConfig } from '@react-router/dev/routes'
2
import { remixRoutesOptionAdapter } from 
3
  '@react-router/remix-routes-option-adapter'
4
import { flatRoutes } from 'remix-flat-routes'
5

6
// ^? Détecte automatiquement toutes les routes sous `app/routes`
7
export default remixRoutesOptionAdapter((defineRoutes) => {
8
  return flatRoutes('routes', defineRoutes, {
9
    ignoredRouteFiles: [
10
      '.*',                               // tous les fichiers cachés
11
      '**/*.css',                         // styles globales
12
      '**/*.test.{js,jsx,ts,tsx}',       // fichiers de test
13
      '**/__*.*',                         // préfixe __
14
      '**/*.server.*',                    // utilitaires serveur
15
      '**/*.client.*',                    // utilitaires client
16
    ],
17
  })
18
}) satisfies RouteConfig

Le paramètre 'routes' indique à flatRoutes le dossier à scanner.

Conventions de nommage

1
app/
2
└── routes/
3
    ├── users+/
4
    │   ├── _usersLayout.tsx   # layout pour /users/*
5
    │   ├── index.tsx          # /users
6
    │   ├── $userSlug.tsx      # /users/:userSlug
7
    │   └── export+/
8
    │       ├── json.tsx       # /users/export/json
9
    │       ├── csv.tsx        # /users/export/csv
10
    │       └── pdf.tsx        # /users/export/pdf
11
    └── home.tsx               # /home

• Le suffixe + dans users+ active le dossier comme segment /users.
• _usersLayout.tsx (underscore en préfixe) crée un layout imbriqué.
• index.tsx → route index du segment (équiv. index() en config).
• $userSlug.tsx → segment dynamique :userSlug.
• export+ → /export à l’intérieur de /users.
• Les fichiers *.server.* ou *.client.* sont ignorés.

Visualiser l’arborescence

Le CLI de React Router permet de “révéler” la config courante :

1
npm run routes

1
└── root
2
    ├── home.tsx
3
    └── users+
4
        ├── index.tsx
5
        ├── $userSlug.tsx
6
        ├── _usersLayout.tsx
7
        └── export+
8
            ├── json.tsx
9
            ├── csv.tsx
10
            └── pdf.tsx

Avantages et bon usage

• Organisation : chaque dossier : fragment d’URL
• Clarté : un coup d’œil dans app/routes suffit à comprendre ton routing
• Moins de boilerplate : plus de routes hard-codées dans routes.ts

Exercices rapides

1. Crée un dossier blog+ avec un _blogLayout.tsx, index.tsx et $slug.tsx. Vérifie l’arborescence avec npm run routes.
2. Ajoute une convention pour ignorer tous les fichiers .spec.tsx en les incluant dans ignoredRouteFiles.
3. Renomme un ancien dossier de routes manuelles en format file-based et teste la navigation sur toutes les routes imbriquées.

Bonne exploration du file-based routing !