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

Содан кейін, әрине, біз id бойынша deleteProduct-ті шақыратын және жойылғаннан кейін бізді басты бетке бағыттайтын action функциямызды жазамыз:

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-іне кіре аласыз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, студентті жою түймесін қосыңыз, жою үшін жаңа жол жасаңыз, оны балалар жолдарына қосыңыз. Барлығының жұмыс істейтініне көз жеткізіңіз.