Introduction au routing avec React Router 7

On a généré un nouveau projet dans la leçon précédente, avec la commande suivante :

1
npx create-react-router@latest routing
2
cd routing
3
npm run dev

Nous allons maintenant l'ouvrir dans notre IDE pour commencer à coder.

Créer une route simple avec React Router 7

Le fichier home.tsx

Le fichier app/routes/home.tsx a été pré-configuré par Remix pour afficher le contenu de la page d'accueil.

1
import type { Route } from "./+types/home";
2
import { Welcome } from "../welcome/welcome";
3

4
export function meta({}: Route.MetaArgs) {
5
  return [
6
    { title: "New React Router App" },
7
    { name: "description", content: "Welcome to React Router!" },
8
  ];
9
}
10

11
export default function Home() {
12
  return <Welcome />;
13
}

On retire la fonction meta, qui est utilisée en SEO pour afficher les informations de la page dans la SERP. On évoquera le sujet SEO dans un prochain module.

J'ai remplacé son contenu par le suivant :

1
export default function Home() {
2
  return (
3
    <div className="px-8 py-2">
4
      <h1 className="text-2xl font-bold">Accueil</h1>
5
      <ul>
6
        <li className="text-lg font-mono">
7
          <a href="/">Accueil</a>
8
        </li>
9
      </ul>
10
    </div>
11
  );
12
}

Cette route a été marquée comme index dans le fichier de configuration routes.ts.

Fichier de configuraton routes.ts

Depuis la v3 de Remix, maintenant appelée React Router v7, chaque route doit être explicitée dans app/routes.ts. On peut cependant réactiver la détection automatique basé sur le nom du fichier en changeant une ligne de code si on préfère l'ancienne méthode.

Ce fichier permet de configurer le routing dans React Router 7. Il est très personnalisable, et par défaut utilise la syntaxe suivante :

Voici son contenu initial :

1
import { type RouteConfig, index } from "@react-router/dev/routes";
2

3
export default [index("routes/home.tsx")] satisfies RouteConfig;

La documentation sur le routing nous partage une configuration de route avancée :

1
import {
2
  type RouteConfig,
3
  route,
4
  index,
5
  layout,
6
  prefix,
7
} from "@react-router/dev/routes";
8

9
export default [
10
  index("./home.tsx"),
11
  route("about", "./about.tsx"),
12

13
  layout("./auth/layout.tsx", [
14
    route("login", "./auth/login.tsx"),
15
    route("register", "./auth/register.tsx"),
16
  ]),
17

18
  ...prefix("concerts", [
19
    index("./concerts/home.tsx"),
20
    route(":city", "./concerts/city.tsx"),
21
    route("trending", "./concerts/trending.tsx"),
22
  ]),
23
] satisfies RouteConfig;

On y retrouve trois méthodes, exportées depuis la librairie par défaut :

• index : la page par défaut à la racine ou sur un segment (ex. /concerts)
• layout : un wrapper réutilisable pour imbriquer plusieurs pages (sidebar, onglets actifs…)
• route : une route classique, à déclarer via les helpers importés de react-router/dev/route
• prefix : Cette syntaxe permet de regrouper plusieurs routes derrière un préfixe. (ex. toutes les routes liées au concerts commencent par le préfixe /concerts)

Ce que nous allons mettre en place

Nous allons créer un dashboard utilisateur afin de tester toutes les types de route et de les comprendre.

Et nous commençons par créer un nouveau fichier users.tsx, qui affichera les utilisateurs de notre application sous forme de liste.

1
export default function Users() {
2
    return (
3
        <div className='px-8 py-2'>
4
            <h1 className='text-2xl font-bold'>Utilisateurs</h1>
5
            <ul>
6

7
                <li className='text-lg font-mono'>
8
                    <a href='/'>Virgile</a>
9
                </li>
10
                <li className='text-lg font-mono'>
11
                    <a href='/'>Robert</a>
12
                </li>
13
                <li className='text-lg font-mono'>
14
                    <a href='/'>John</a>
15
                </li>
16
            </ul>
17
        </div>
18
    );
19
}

Ce fichier au format .tsx est un composant React exporté par défaut. Cependant, pour être détecté comme une route par React Router 7, nous devons la déclarer dans le fichier app/routes.ts.

1
import { type RouteConfig, index, route } from '@react-router/dev/routes';
2

3
export default [
4
	index('routes/home.tsx'),
5
	route('users', 'routes/users.tsx'),
6
] satisfies RouteConfig;

Et voilà ! Nous avons mis en place ensemble notre toute première route avec React Router 7.

Dans la prochaine leçon, on va effectuer le chargement de ces données côté serveur avec la méthode loader.