Aggiunta di dati in React Router

Nelle lezioni precedenti abbiamo preparato il loader e il recupero dei dati per una determinata route dallo storage. Ora vediamo nel esempio della nostra applicazione come aggiungere un nuovo prodotto e scrivere i suoi dati nello storage.

Apriamo il file root.jsx e aggiungiamo nel layout un pulsante per aggiungere un nuovo prodotto prima di nav, avvolgendolo in un tag form. Inoltre avvolgiamo ora il pulsante e la nostra lista in un altro div con #menu. Il layout ora sarà così:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">aggiungi prodotto</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Senza nome</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>nessun prodotto qui ...</i>
			</p>
			)}
		</div>

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

Se ora andiamo nella scheda 'Rete' del pannello degli strumenti di sviluppo, e poi premiamo il nostro pulsante, vedremo una richiesta errata del documento al server. Con React Router utilizzeremo nuovamente il routing lato client, evitando la richiesta al server.

Per fare questo, cambiamo il tag form con il componente Form di React Router. Aggiungiamo per prima cosa l'import di Form:

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

Ora sostituiamo i tag form nel frammento di codice:

<Form method="post">
	<button type="submit">aggiungi prodotto</button>
</Form>

Ricaricate la nostra applicazione e guardate di nuovo il pannello degli strumenti di sviluppo. Premiamo il pulsante di aggiunta prodotto - ora non c'è più la richiesta al server (non fate caso all'errore per il momento).

Prendete l'applicazione, creata da voi nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, correggete il layout della funzione Root, aggiungete un pulsante per aggiungere uno studente nel tag form. Assicuratevi che alla pressione del pulsante venga effettuata una richiesta al server.

E ora sostituite il tag form, con il componente Form. Assicuratevi che alla pressione del pulsante di aggiunta studente non venga inviata una richiesta al server.