Reindirizzamento a un'altra route in React Router
Ora i dati inseriti nel modulo durante la modifica del prodotto vengono salvati, ma c'è un MA - dopo il salvataggio dei dati rimaniamo nella pagina con il modulo, mentre dobbiamo tornare alla pagina del prodotto. In questo ci aiuterà il reindirizzamento, che conosceremo in questa lezione.
Apriamo il file edit.jsx
e importiamo redirect dalla
libreria:
import { redirect } from 'react-router-dom';
E poi facciamo in modo che la funzione
action ora restituisca
non 1, ma ci reindirizzi
alla route necessaria. In questo caso
dobbiamo tornare alla
pagina del prodotto:
return redirect(`/products/${params.productId}`);
Ora, cliccando sul pulsante di salvataggio, torniamo alla pagina del prodotto con i dati aggiornati.
Possiamo fare la stessa cosa anche per l'aggiunta di un nuovo prodotto, dato che sarebbe probabilmente più comodo andare direttamente al modulo e compilarlo. Facciamo così.
Per prima cosa dobbiamo ora aprire
il file root.jsx e importare
redirect, poiché l'aggiunta
dei prodotti avviene nella pagina root:
import { redirect } from 'react-router-dom';
Prendiamo di nuovo la funzione action e
ora restituiremo non product,
ma effettueremo un reindirizzamento alla pagina
di modifica:
return redirect(`/products/${product.id}/edit`);
Controlliamo anche questo. Clicchiamo ora sul pulsante di aggiunta prodotto e vedremo il modulo per la sua modifica.
Prendi l'applicazione creata da te nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, implementa il reindirizzamento alla pagina dello studente dopo aver cliccato il pulsante di salvataggio dati nella pagina con il modulo.
E ora implementa il reindirizzamento dalla pagina principale alla pagina con il modulo di modifica dati dello studente dopo il click sul pulsante di aggiunta studente alla lista.
