Maršruto pašalinimas React Router

Mes parašėme funkciją duomenų šalinimui iš saugyklos. Dabar į produkto puslapio išdėstymą pridėkime kodo fragmentą su mygtuku produkto pašalinimui. Pridėkime jį iškart po redagavimo mygtuko. Apgaubkime abi formules su mygtukais į div #control. Tada į action įrašykime reikšmę 'delete'. Taip pat pridėsime dialogą, kad vartotojas dar kartą patvirtintų - ar jis nori ištrinti produktą:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">redaguoti</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Ar norite ištrinti šį produktą?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">ištrinti</button>
  </Form>
</div>

Pridėkime ir šiek tiek stilių į mūsų CSS failą:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

O dabar sukursime naują maršrutą produkto pašalinimui. Tam atidarykite katalogą routes ir jame sukurkite failą delete.jsx. Pridėkime į jį iškart importą redirect ir pašalinimo funkciją deleteProduct:

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

Ir tada, žinoma, rašome mūsų funkciją action, kuri iškvies deleteProduct pagal id, o po ištrynimo nukreips mus į pagrindinį puslapį:

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

Mums belieka tik atidaryti main.jsx. Importuoti mūsų action:

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

Ir nustatyti jį kaip reikšmę metodui action šalinimo maršruto. Patį maršruto objektą pridėsime į masyvo children pabaigą:

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

Dabar mes galime paspausti bet kurį produktą ir jį ištrinti naudojant mygtuką pašalinimui. Galite pažiūrėti į "localforage" naršyklės kūrėjo skydelyje ir tuo įsitikinti.