Ուղղուի ջնջումը React Router-ում

Տվյալները պահեստից ջնջելու ֆունկցիան մենք գրել ենք: Եկեք հիմա էջի վերստում ավելացնենք ապրանքը ջնջելու կոճակով կոդի հատվածը: Ավելացնենք այն խմբագրման կոճակից անմիջապես հետո: Երկու կոճակներով ֆորմաները կփաթաթենք #control դիվի մեջ: Ապա action-ում կգրենք 'delete' արժեքը: Նաև կավելացնենք երկխոսության պատուհան, որպեսզի օգտագործողը ևս մեկ անգամ հաստատի՝ արդյոք նա ցանկանում է ջնջել ապրանքը:

routes/product.jsx<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 ֆայլում:

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-ում և համոզվել դրանում: