Ajout d'une autre route dans React Router

Nous avons une route racine menant à la page d'accueil, sur laquelle nous avons des liens pour les produits. Ajoutons maintenant une autre route afin qu'en cliquant sur l'un des liens, la page du produit s'affiche, et non un écran d'erreur.

Pour commencer, ouvrons notre application, que nous avons créée lors des leçons précédentes, et créons dans le dossier routes le fichier product.jsx. Créons-y le composant Product :

function Product() {}

export default Product;

Maintenant, créons à l'intérieur de Product un objet product, avec les propriétés name, cost et amount, pour l'instant, ce seront des valeurs fixes :

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Et sur la page du produit, nous afficherons, respectivement, son nom, son coût et sa quantité :

return (
	<div>
		<h2>Page du produit</h2>
		<p>Nom : {product.name}</p>
		<p>Coût : {product.cost}</p>
		<p>Quantité : {product.amount}</p>
	</div>
);

N'oublions pas d'ajouter l'import du composant Product dans le fichier main.jsx :

import Product from './routes/product';

Et, enfin, ajoutons une autre route dans notre application, faisons-le immédiatement après la racine. Pour le chemin, indiquons 'products/:productId', et comme élément à afficher, nous avons le composant Product :

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Et maintenant, lançons l'application, cliquons sur les liens et nous nous retrouvons sur la page du produit (pour l'instant, elle est identique pour tous les liens), et non sur une page d'erreur.

Prenez l'application que vous avez créée dans les tâches des leçons précédentes. En utilisant le matériel de la leçon, créez de la même manière le fichier student.jsx, que la page de l'étudiant affiche son prénom, son nom, son année d'admission et sa spécialité. Ajoutez une nouvelle route pour la page de l'étudiant dans le fichier main.jsx, définissez la valeur de path sur 'students/:studentId'. Assurez-vous qu'en cliquant sur les liens, vous arrivez désormais sur la page de l'étudiant.