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-и панели таҳиягар гузаред ва дар ин бовар кунед.

Барномаеро гиред, ки шумо дар вазифаҳо ба дарсҳои гузашта сохтед. Истифода бурдани маводҳои дарс, тугма барои нест кардани донишҷӯ илова кунед, нав созед роҳ барои нест кардан, онро ба роҳҳои фарзанд илова кунед. Боварӣ ҳосил кунед, ки ҳама кор мекунад.