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('क्या आप इस प्रोडक्ट को हटाना चाहते हैं?')) {
        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 फंक्शन लिखते हैं, जो id के आधार पर deleteProduct को कॉल करेगा, और डिलीट होने के बाद हमें होम पेज पर रीडायरेक्ट कर देगा:

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 में जाकर इसकी पुष्टि कर सकते हैं।