Excluindo uma rota no React Router

Nós escrevemos a função para excluir dados do armazenamento. Agora vamos adicionar ao layout da página do produto um trecho de código com um botão para excluir o produto. Vamos adicioná-lo logo após o botão de edição. Vamos envolver ambos os formulários com botões em uma div #control. Em seguida, no action, escreveremos o valor 'delete'. Também adicionaremos uma caixa de diálogo para que o usuário confirme novamente - se realmente deseja excluir o produto:

<div id="control">
	<Form action="edit">
		<button type="submit">editar</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Você deseja excluir este produto?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">excluir</button>
	</Form>
</div>

Vamos adicionar também alguns estilos ao nosso arquivo CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

E agora vamos criar uma nova rota para excluir o produto. Para isso, abra a pasta routes e crie nela o arquivo delete.jsx. Vamos adicionar nele a importação de redirect e da função de exclusão deleteProduct:

import { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

E então, naturalmente, escrevemos nossa função action, que irá chamar deleteProduct pelo id, e após a exclusão nos redirecionará para a página principal:

export async function action({ params }) {
	await deleteProduct(params.productId);
	return redirect('/');
}

Só nos resta abrir o main.jsx, importar nossa action:

import { action as deleteAction } from './routes/delete';

E defini-la como valor para a propriedade action da rota de exclusão. O próprio objeto de rota vamos adicionar ao final do array children:

{
	path: 'products/:productId/delete',
	action: deleteAction,
},

Agora podemos clicar em algum produto e excluí-lo usando o botão de exclusão. Você pode verificar no localforage do painel do desenvolvedor para confirmar.

Pegue o aplicativo que você criou nas tarefas das lições anteriores. Usando os materiais da lição, adicione um botão para excluir um estudante, crie uma nova rota para exclusão, adicione-a às rotas filhas. Certifique-se de que tudo funciona.