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:

routes/product.jsx<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:

index.cssdiv#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:

routes/delete.jsximport { 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:

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

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

main.jsximport { 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:

main.jsx{
  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.