Création d'une première route React Router 7

Pour créer une nouvelle route dans une application React Router 7, nous devons faire deux choses :

• Créer un nouveau fichier au format .tsx dans le dossier routes.
• Déclarer la route dans le fichier de configuration app/routes.ts.

Création de la route learn.tsx

Par convention, nous nommons nos routes comme des segments d'URL. En minuscule, et en retirant tout caractère spéciaux. Les espaces sont remplaçés par des tirets. On nomme cette syntaxe le kebab-case.

Nous allons ensuite créer un composant React dans ce fichier.

1
export default function Learn() {
2
	return (
3
		<div>
4
			<h1>Learn React Router 7</h1>
5
			<p>Make perfect websites</p>
6
		</div>
7
	);
8
}

Ensuite, nous pouvons accéder à la page http://localhost:5371/learn.

Y voyez-vous notre nouvelle page ?

Non, en effet. Il nous reste une étape pour permettre à React Router d'afficher cette page. Nous devons la déclarer en tant que route.

Le fichier de configuration app/routes.ts

Par défaut, nous devons déclarer à la main chacune de nos routes. Le fichier app/routes contient qu'une route pour l'instant : la page d'accueil de notre application (la route index).

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

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

Nous devons importer la méthode utilitaire route depuis @react-router/dev/routes. Cela nous permettra de déclarer notre nouvelle page learn.tsx.

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

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

Dans cette vidéo, on plonge dans le monde du routing avec React Router version 7. On commence par comprendre comment configurer nos routes dans le fichier root.ts, qui est le cœur de notre application pour gérer les chemins d'URL. On utilise la méthode route de react-router pour définir ces chemins, en liant chaque segment d'URL à son fichier TSX correspondant. Par exemple, pour notre page d'accueil, on utilise simplement l'URL / et on pointe vers le fichier home.tsx.

Ensuite, on crée une nouvelle page learn.tsx avec un composant simple qui affiche "Learn React Router 7". Mais attention, si on ne déclare pas cette page dans notre fichier de routes, on se retrouve avec une erreur 404. Pour éviter ça, on ajoute une nouvelle entrée dans notre tableau de routes, en définissant le segment d'URL /learn et le chemin vers notre composant.

On découvre aussi que cette méthode de configuration par défaut peut devenir complexe à gérer pour des applications avec de nombreuses routes. Une alternative plus pratique est d'utiliser le nommage des fichiers pour définir les routes, mais cela nécessite d'installer la librairie fs-routes. On verra comment l'implémenter dans un module dédié aux routes.

En résumé, React Router 7 offre une flexibilité pour gérer les routes, mais il est crucial de bien comprendre les conventions et outils disponibles pour maintenir une application propre et efficace. Restez connectés pour explorer plus de fonctionnalités et astuces sur React Router et d'autres technologies comme Tailwind et Vite dans nos prochaines sessions.