Odstranění trasy v React Router

Funkci pro odstranění dat z úložiště jsme napsali. Pojďme nyní přidat do rozvržení stránky produktu kus kódu s tlačítkem pro odstranění produktu. Přidáme jej ihned po tlačítku úprav. Obě formuláře s tlačítky obalíme do div #control. Poté do action zapíšeme hodnotu 'delete'. Také přidáme dialogové okno, aby se uživatel znovu potvrdil - chce li produkt odstranit:

<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>

Přidejme také stylů do našeho CSS souboru:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

A nyní vytvoříme novou trasu pro odstranění produktu. Pro otevření složky routes a vytvoření v ní souboru delete.jsx. Přidejme do něj ihned import redirect a funkce odstranění deleteProduct:

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

A poté, přirozeně, píšeme naši funkci action, která bude volat deleteProduct podle id, a po odstranění nás přesměruje na hlavní stránku:

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

Zbývá nám pouze otevřít main.jsx. Importovat naši action:

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

A nastavit ji jako hodnotu pro metodu action trasy odstranění. Samotný objekt trasy přidáme na konec pole children:

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

Nyní můžeme kliknout na nějaký produkt a odstranit jej pomocí tlačítka odstranění. Můžete nahlédnout do localforage panelu vývojáře a přesvědčit se o tom.

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. Používejte materiály lekce, přidejte tlačítko pro odstranění studenta, vytvořte novou trasu pro odstranění, přidejte ji do podřízených tras. Ujistěte se, že vše funguje.