Redirección a otra ruta en React Router
Ahora los datos ingresados en el formulario al editar un producto se guardan, pero hay un PERO - después de guardar los datos nos quedamos en la página del formulario, y necesitamos volver a la página del producto. En esto nos ayudará la redirección, con la cual nos familiarizaremos en esta lección.
Abramos el archivo edit.jsx
e importemos redirect de
la biblioteca:
import { redirect } from 'react-router-dom';
Y luego hagamos que la función
action ahora retorne
no 1, sino que nos redirija
a la ruta necesaria. En este caso
necesitamos volver a la
página del producto:
return redirect(`/products/${params.productId}`);
Ahora, al hacer clic en el botón de guardar, volvemos a la página del producto con los datos actualizados.
Podemos hacer lo mismo para agregar un nuevo producto, ya que probablemente sería más conveniente ir inmediatamente al formulario y completarlo. Hagámoslo así.
Para empezar, ahora necesitamos abrir
el archivo root.jsx e importar
redirect, ya que la adición
de productos ocurre en la página raíz:
import { redirect } from 'react-router-dom';
Nuevamente tomamos la función action y
ahora retornaremos no product,
sino haremos una redirección a la página
de edición:
return redirect(`/products/${product.id}/edit`);
Comprobemos esto también. Hagamos clic ahora en el botón de agregar producto y veremos el formulario para su edición.
Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, implemente en ella la redirección a la página del estudiante después de hacer clic en el botón de guardar datos en la página del formulario.
Y ahora implemente la redirección desde la página principal a la página con el formulario de edición de datos del estudiante después de hacer clic en el botón de agregar estudiante a la lista.
