React Router-də Marşrutun Silinməsi

Məlumatları anbardan silmək üçün funksiyanı yazdıq. Gəlin indi məhsul səhifəsinin dizaynına məhsulu silmək üçün düyməsi olan bir kod parçası əlavə edək. Onu redaktə düyməsindən dərhal sonra yerləşdirək. Hər iki düymə formasını #control div-inə qoyaq. Sonra action-də 'delete' dəyərini yazacağıq. Həmçinin, istifadəçinin məhsulu silmək istədiyini bir daha təsdiqləməsi üçün bir dialoq pəncərəsi əlavə edəcəyik:

<div id="control">
	<Form action="edit">
		<button type="submit">edit</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Bu məhsulu silmək istəyirsiniz?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">delete</button>
	</Form>
</div>

Gəlin CSS faylımıza da bəzi stillər əlavə edək:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

İndi isə məhsulu silmək üçün yeni bir marşrut yaradacağıq. Bunun üçün routes qovluğunu açın və içində delete.jsx faylı yaradın. Ona dərhal redirect və silmə funksiyasını deleteProduct import edək:

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

Və sonra, təbii ki, id-ə görə deleteProduct-i çağıracaq və silindikdən sonra bizi ana səhifəyə yönləndirəcək action funksiyamızı yazırıq:

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

Bizə yalnız main.jsx-i açmaq qalır. action-ımızı import edək:

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

Və onu silmə marşrutunun action metodu üçün dəyər kimi təyin edək. Marşrut obyektinin özünü children massivinin sonuna əlavə edəcəyik:

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

İndi hər hansı bir məhsula klikləyə və silmə düyməsindən istifadə edərək onu silə bilərik. Bunu yoxlamaq üçün inkişaf etdirici panelinin localforage hissəsinə baxa bilərsiniz.

Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərsin materiallarından istifadə edərək, tələbəni silmək üçün düymə əlavə edin, silmə üçün yeni marşrut yaradın, onu uşaq marşrutlarına əlavə edin. Hər şeyin işlədiyinə əmin olun.