Ուղղուի ջնջումը React Router-ում

Տվյալները պահեստից ջնջելու ֆունկցիան մենք գրել ենք: Եկեք հիմա էջի վերստում ավելացնենք ապրանքը ջնջելու կոճակով կոդի հատվածը: Ավելացնենք այն խմբագրման կոճակից անմիջապես հետո: Երկու կոճակներով ֆորմաները կփաթաթենք #control դիվի մեջ: Ապա action-ում կգրենք 'delete' արժեքը: Նաև կավելացնենք երկխոսության պատուհան, որպեսզի օգտագործողը ևս մեկ անգամ հաստատի՝ արդյոք նա ցանկանում է ջնջել ապրանքը:

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

Նաև ավելացնենք ոճեր մեր CSS ֆայլում:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Իսկ հիմա մենք կստեղծենք նոր ուղղի ապրանքը ջնջելու համար: Դրա համար բացեք routes պանակը և նրա մեջ ստեղծեք delete.jsx ֆայլը: Ավելացնենք դրա մեջ անմիջապես redirect-ի իմպորտը և ջնջման ֆունկցիան deleteProduct:

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

Իսկ հետո, բնականաբար, գրում ենք մեր action ֆունկցիան, որն կկանչի deleteProduct-ը ըստ id-ի, իսկ ջնջելուց հետո կվերահղի մեզ գլխավոր էջ:

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

Մեզ մնում է միայն բացել main.jsx-ը, իմպորտել մեր action-ը:

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

Եվ սահմանել այն որպես արժեք ջնջման ուղղու action մեթոդի համար: Ստեղծված ուղղու օբյեկտը մենք կավելացնենք children զանգվածի վերջում:

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

Հիմա մենք կարող ենք կլիկ անել որևէ ապրանքի վրա և ջնջել այն ջնջման կոճակի միջոցով: Կարող եք նայել մշակողի գործիքների localforage-ում և համոզվել դրանում:

Վերցրեք նախկին դասերին առաջադրանքներում ձեր ստեղծած հավելվածը: Օգտագործելով դասի նյութերը, ավելացրեք ուսանողին ջնջելու կոճակ, ստեղծեք ջնջման նոր ուղղի, ավելացրեք այն դուստր ուղղուների մեջ: Համոզվեք, որ ամեն ինչ աշխատում է: