Agregar datos en React Router

En lecciones anteriores preparamos el cargador y la descarga de datos para una ruta específica desde el almacenamiento. Ahora conozcamos mediante el ejemplo de nuestra aplicación cómo agregar un nuevo producto y escribir sus datos en el almacenamiento.

Abramos el archivo root.jsx y agreguemos en el diseño un botón para agregar un nuevo producto antes de nav, envolviéndolo en una etiqueta de formulario. También envolveremos ahora el botón y nuestra lista en otro div con #menu. El diseño ahora se verá así:

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 ahora vamos a la pestaña 'Red' del panel de desarrollador, y luego presionamos nuestro botón, veremos una solicitud de documento errónea al servidor. Con React Router usaremos nuevamente el enrutamiento del lado del cliente, excluyendo la solicitud al servidor.

Para ello, cambiemos la etiqueta form por el componente Form de React Router. Agreguemos para empezar la importación de Form:

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

Ahora reemplacemos las etiquetas form en el fragmento de código:

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

Recargue nuestra aplicación y mire nuevamente el panel de desarrollador. Presionemos el botón de agregar producto - ahora ya no hay solicitud al servidor (por ahora no preste atención al error).

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Utilizando los materiales de la lección, corrija el diseño de la función Root, agregue un botón para agregar un estudiante en la etiqueta form. Asegúrese de que al presionar el botón se realice una solicitud al servidor.

Y ahora reemplace la etiqueta form, por el componente Form. Asegúrese de que al presionar el botón de agregar estudiante no se envíe una solicitud al servidor.