Ajouter des données dans React Router

Dans les leçons précédentes, nous avons préparé le chargeur et le déchargement des données pour une route spécifique depuis le stockage. Faisons maintenant connaissance, sur l'exemple de notre application, de la façon d'ajouter un nouveau produit et d'enregistrer ses données dans le stockage.

Ouvrons le fichier root.jsx et ajoutons dans le layout un bouton pour ajouter un nouveau produit avant nav, en l'enveloppant dans une balise formulaire. Nous allons aussi maintenant envelopper le bouton et notre liste dans une autre div avec #menu. Le layout ressemblera maintenant à ceci :

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unnamed</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>no products here ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

Si nous allons maintenant dans l'onglet 'Réseau' du panneau de développement, puis que nous cliquons sur notre bouton, nous verrons une requête de document erronée vers le serveur. Avec React Router, nous allons à nouveau utiliser le routage côté client, en évitant la requête vers le serveur.

Pour cela, changeons la balise form par le composant Form de React Router. Ajoutons pour commencer l'import de Form :

import { Form } from 'react-router-dom';

Maintenant, remplaçons les balises form dans le morceau de code :

<Form method="post">
	<button type="submit">add product</button>
</Form>

Rechargez notre application et regardez à nouveau le panneau de développement. Cliquons sur le bouton d'ajout de produit - maintenant, il n'y a plus de requête vers le serveur (ne faites pas attention à l'erreur pour le moment).

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, corrigez le rendu de la fonction Root, ajoutez un bouton pour ajouter un étudiant dans la balise form. Assurez-vous que lorsqu'on appuie sur le bouton, une requête est envoyée au serveur.

Et maintenant, remplacez la balise form par le composant Form. Assurez-vous que lorsqu'on clique sur le bouton d'ajout d'étudiant, aucune requête n'est envoyée au serveur.