React Router හි මාර්ගයක් මකා දැමීම

ගබඩාවෙන් දත්ත මකා දැමීම සඳහා වූ ශ්‍රිතය අපි ලිව්වා. අපි දැන් භාණ්ඩ පිටුවේ ඇති HTML වින්‍යාසයට භාණ්ඩය මකා දැමීම සඳහා බොත්තමක් සහිත කේත කොටසක් එකතු කරමු. අපි එය සංස්කරණ බොත්තමට පසුව වහාම එකතු කරමු. බොත්තම් සහිත ආකෘති දෙකම div #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 බලා එය සත්‍යාපනය කළ හැක.

පෙර පාඩම් සඳහා වන කාර්යයන්හිදී ඔබ සාදන ලද යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, ශිෂ්‍යයෙකු මකා දැමීම සඳහා බොත්තමක් එකතු කරන්න, මකා දැමීම සඳහා නව මාර්ගයක් සාදන්න, එය දරු මාර්ගවලට එකතු කරන්න. සියල්ල ක්‍රියාත්මක වන බවට වග බලා ගන්න.