React Router-da marshrutni o'chirish

Ma'lumotlarni ombordan o'chirish uchun funksiyani yozdik. Keling, endi mahsulot sahifasining dizayniga mahsulotni o'chirish tugmasi bilan kod qismini qo'shamiz. Uni tahrirlash tugmasidan keyin darhol qo'shamiz. Ikkala tugma shaklini #control div-iga o'rab qo'yamiz. Keyin action-ga 'delete' qiymatini yozamiz. Shuningdek, foydalanuvchi mahsulotni o'chirishni xohlayotganini yana bir bor tasdiqlashi uchun dialoq oynasi qo'shamiz:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">tahrirlash</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Ushbu mahsulotni o'chirmoqchimisiz?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">o'chirish</button>
  </Form>
</div>

CSS faylimizga ba'zi uslublarni qo'shamiz:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Endi esa mahsulotni o'chirish uchun yangi marshrut yaratamiz. Buning uchun routes papkasini oching va unda delete.jsx faylini yarating. Unga redirect va deleteProduct o'chirish funksiyasini darhol import qilamiz:

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

Keyin, albatta, action funksiyamizni yozamiz, u id bo'yicha deleteProduct ni chaqiradi va o'chirishdan so'ng bizni asosiy sahifaga yo'naltiradi:

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

Bizga faqat main.jsx ni ochish qoldi. Bizning action ni import qilamiz:

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

Va uni o'chirish marshruti uchun action usulining qiymati sifatida o'rnating. Marshrut ob'ektini children massivi oxiriga qo'shamiz:

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

Endi biz biron bir mahsulotni bosing va uni o'chirish tugmasi yordamida o'chiring. Ishlab chiqaruvchi panelidagi localforage-ga kirib, buni tekshirishingiz mumkin.