Page produit dans le navigateur avec Redux

Lors de la dernière leçon, nous avons créé une page distincte pour le produit. Maintenant, nous devons faire en sorte que lorsqu'on clique sur un bouton, notre page apparaisse dans le navigateur.

Pour commencer, attachons-lui une adresse à laquelle elle sera affichée. Ouvrons le fichier App.jsx, dans lequel nous définissons les routes, et ajoutons dans children une route enfant supplémentaire (n'oubliez pas d'importer ProductPage.jsx). Spécifions le chemin et le composant que nous afficherons :

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Maintenant, ouvrons ProductsList.jsx dans le dossier products et modifions légèrement le code pour dispProducts. Nous avons désormais une page distincte avec des informations complètes sur chaque produit. Cela signifie que dans la liste des produits, nous n'afficherons que le nom du produit et un texte de description abrégé. Nous ajouterons également un lien sous forme d'élément de navigation Link de la bibliothèque de routeur, en cliquant sur lequel on pourra accéder à la page du produit. Ajoutons également une classe product-excerpt à la div pour espacer les produits. Maintenant, notre code pour dispProducts sera le suivant :

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Importons Link :

import { Link } from 'react-router-dom'

Et ajoutons des styles pour les classes link-btn et product-excerpt dans index.css :

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Enfin, rendons également fonctionnel le lien dans le menu de gauche, menant à la page de la liste des produits, afin que nous puissions y accéder depuis n'importe quel autre endroit. Pour cela, ouvrons notre root.jsx et remplaçons cette ligne de code :

<a>Products</a>

Par la suivante :

<NavLink to="/products" end>
	Products
</NavLink>

N'oublions pas non plus d'importer NavLink de la bibliothèque pour React Router :

import { Outlet, NavLink } from 'react-router-dom'

Lançons notre application. Maintenant, nous pouvons accéder à la page d'informations de n'importe quel produit en cliquant sur le bouton de visualisation. Essayez maintenant d'ajouter un nouveau produit et regardez ses informations sur une page distincte en cliquant sur le bouton de visualisation. De plus, désormais, pour revenir à la liste des produits, il suffit de cliquer sur 'Products' dans le menu de gauche. En vous trouvant sur différentes pages, regardez comment l'URL change dans la barre d'adresse du navigateur.

Ouvrez votre application avec les étudiants. Dans le fichier App.jsx, créez une autre route enfant pour la page de l'étudiant.

Dans le fichier StudentsList.jsx, apportez des modifications au code pour dispStudents, comme montré dans la leçon.

Faites en sorte que le lien 'Students' dans le menu de gauche mène à la page avec la liste des étudiants. Vérifiez que tout fonctionne.

Observez comment la valeur dans la barre d'adresse du navigateur change, en fonction de la page sur laquelle vous vous trouvez actuellement.