Deleting a Route in React Router

We have written a function for deleting data from the storage. Let's now add a piece of code with a button for deleting the product to the product page layout. Let's add it right after the edit button. Wrap both forms with buttons in a div #control. Then in action we will write the value 'delete'. We will also add a dialog box for the user to confirm again whether he wants to delete the product:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">edit</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Do you want to delete this product?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">delete</button>
  </Form>
</div>

Let's also add some styles to our CSS file:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Now we will create a new route for deleting a product. To do this, open the routes folder and create a delete.jsx file in it. Add the redirect import and the deleteProduct delete functions to it:

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

And then, naturally, we write our function action, which will call deleteProduct by id, and after deleting, will redirect us to the main page:

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

All we have to do is open main.jsx. Import our action:

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

And set it as the value for the action method of the delete route. We will add the route object itself to the end of the children array:

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

Now we can click on any product and delete it using the delete button. You can check the localforage of the developer panel to see this.