React Router-daky ýoly aýyrmak

Maglumatlary ammarydan aýyrmak üçin funksiýany ýazdyk. Indi önüm sahypasynyň görnüşine önümi aýyrmak üçin düwmeli kodyň bölegini göçürýäris. Ony üýtgetmek düwmesinden soň goýarys. Her iki düwmeli formany #control div-ine ýerleşdirýäris. Soňra action-de 'delete' bahasyny ýazýarys. Şeýle hem ulanyjynyň önümi aýyrmak isleýändigini tassyklamak üçin dialog penjiresini goşýarys:

<div id="control">
	<Form action="edit">
		<button type="submit">üýtget</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Bu önümi aýyrmak isleýärsiňizmi?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">aýyr</button>
	</Form>
</div>

Şeýle hem CSS faýlymyza stilleri goşýarys:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Indi bolsa önümi aýyrmak üçin täze ýol döredýäris. Bunun üçin routes bukjasyny açyň we onda delete.jsx faýlyny düzüň. Onda redirect importyny we aýyryş funksiýasyny deleteProduct ýerleşdirýäris:

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

Soňra, elbetde, id boýunça deleteProduct-i çagyryp, aýyrylandan soň bizi baş sahypa ýönlendirer action funksiýamyzy ýazýarys:

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

Bize diňe main.jsx-i açmak galdy. action-ymyzy import etmek:

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

We ony aýyryş ýolunyň action usuly üçin baha hökmünde belläp goýmak. Ýol objectini özümiz children massiwiniň ahyryna goşýarys:

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

Indi bir önüme basyp, aýyryş düwmesiniň kömegi bilen ony aýyryp bileris. Öňünden işleýän paneliniň localforage bölümine seredip, buna göz ýetirip bilersiňiz.

Öňki sapaklaryň tabşyryklarynda döreden programmanyzy alyň. Sapagyň materiallaryny ulanyp, talyby aýyrmak üçin düwme goşuň, aýyrmak üçin täze ýol düzüň, ony çagalaryň ýollaryna goşuň. Hemmesiniň işleýändigine göz ýetiriň.