მარშრუტის წაშლა React Router-ში

ჩვენ დავწერეთ ფუნქცია მონაცემების წასაშლელად საცავიდან. მოდით ახლა დავამატოთ პროდუქტის გვერდის ვერსტკაში კოდის ნაწილი პროდუქტის წასაშლელ ღილაკთან ერთად. დავამატოთ იგი შეცვლის ღილაკის შემდეგ. ორივე ფორმას ღილაკებთან ერთად შევკრიბოთ დივში #control. შემდეგ action-ში ჩავწეროთ მნიშვნელობა 'delete'. ასევე დავამატოთ დიალოგური ფანჯარა, რათა მომხმარებელმა კიდევ ერთხელ დაადასტუროს - უნდა თუ არა პროდუქტის წაშლა:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">რედაქტირება</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('გსურთ ამ პროდუქტის წაშლა?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">წაშლა</button>
  </Form>
</div>

ასევე დავამატოთ სტილები ჩვენს CSS ფაილში:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

ახლა კი ჩვენ შევქმნით ახალ მარშრუტს პროდუქტის წასაშლელად. ამისათვის გახსენით ფოლდერი routes და შექმენით მასში ფაილი delete.jsx. დავამატოთ მასში იმპორტი redirect და წაშლის ფუნქცია deleteProduct:

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

შემდეგ კი, ბუნებრივია, ვწერთ ჩვენს ფუნქციას action, რომელიც გამოიძახებს deleteProduct-ს id-ის მიხედვით, ხოლო წაშლის შემდეგ გადამისამართებს ჩვენს გვერდის მთავარ გვერდზე:

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

ჩვენ რჩება მხოლოდ გახსნათ main.jsx. და იმპორტი გავაკეთოთ ჩვენი action-ისთვის:

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

და დავაყენოთ იგი, როგორც მნიშვნელობა წაშლის მარშრუტის მეთოდისთვის action. თავად მარშრუტის ობიექტს ჩვენ დავამატებთ მასივის ბოლოს children:

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

ახლა ჩვენ შეგვიძლია დავაწკაპუნოთ რომელიმე პროდუქტზე და წავშალოთ იგი წაშლის ღილაკის დახმარებით. შეგიძლიათ ჩახედოთ localforage-ში დეველოპერის პანელში და დარწმუნდეთ ამაში.