Redirecionamento para outra rota no React Router
Agora os dados inseridos no formulário durante a edição do produto são salvos, mas há um MAS - após salvar os dados, permanecemos na página do formulário, e precisamos voltar para a página do produto. O redirecionamento nos ajudará com isso, que conheceremos nesta lição.
Vamos abrir o arquivo edit.jsx
e importar redirect da
biblioteca:
import { redirect } from 'react-router-dom';
E então faremos com que a função
action agora retorne
não 1, mas redirecione-nos
para a rota desejada. Neste caso,
precisamos voltar para
a página do produto:
return redirect(`/products/${params.productId}`);
Agora, ao clicar no botão de salvar, voltamos para a página do produto com os dados atualizados.
Podemos fazer o mesmo para adicionar um novo produto, pois provavelmente seria mais conveniente ir direto para o formulário e preenchê-lo. Vamos fazer isso.
Para começar, precisamos agora abrir
o arquivo root.jsx e importar
redirect, uma vez que a adição
de produtos ocorre na página raiz:
import { redirect } from 'react-router-dom';
Pegamos novamente a função action e
agora retornaremos não product,
mas faremos um redirecionamento para a página
de edição:
return redirect(`/products/${product.id}/edit`);
Vamos testar isso também. Vamos clicar no botão de adicionar produto e veremos o formulário para sua edição.
Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, implemente nele o redirecionamento para a página do estudante após clicar no botão de salvar dados na página do formulário.
E agora implemente o redirecionamento da página principal para a página do formulário de edição de dados do estudante após clicar no botão de adicionar estudante à lista.
