Ajouter un routeur dans React Router

Après nous être un peu familiarisés avec les routeurs, nous pouvons en ajouter un à l'application.

Mais d'abord, nous devons un peu nettoyer le modèle de notre application, que nous avons créé lors des leçons précédentes. Plus précisément, nous allons nous occuper du dossier src. Jetez-en le dossier assets, les fichiers App.css, App.jsx. En gros, il ne vous restera dedans que main.jsx et index.css.

Ouvrez index.css et videz-le complètement. Qu'il soit vide.

Maintenant, occupons-nous de notre fichier principal main.jsx. Nous y mettrons le code suivant :

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Et maintenant, nous pouvons ajouter le routeur. Nous utiliserons BrowserRouter, car il est le plus souvent utilisé dans les applications web. N'oublions pas non plus la syntaxe moderne. Ajoutons la ligne d'import :

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Ensuite, créons une constante router et créons notre BrowserRouter après les lignes d'import. Faisons en sorte que sur la page principale, un div avec l'inscription 'Hello Router!' s'affiche. Pour cela, indiquons le chemin vers la page principale et l'élément à afficher :

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Nous devons encore ajouter le composant RouterProvider et y inscrire le routeur que nous avons créé ci-dessus. Il accepte tous les objets de route, rend notre application et connecte les autres API :

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Le code complet ressemblera à ceci :

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Sauvegardons les modifications. Félicitations ! Notre application avec vous ne génère plus d'erreur. Maintenant, si nous la lançons, sur la page principale du navigateur, nous verrons 'Hello Router!'.

En utilisant le matériel fourni, faites en sorte que sur la page principale de votre application, que vous avez créée dans les devoirs des leçons précédentes, un paragraphe avec le texte 'I'm number one in React!' s'affiche.