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:

routes/product.jsx<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:

index.cssdiv#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:

routes/delete.jsximport { 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:

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

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

main.jsximport { 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:

main.jsx{
  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.