रिएक्ट राउटर में बिना पथ के रूट
इस पाठ में हम बिना पथ के रूट के एक और उपयोगी गुण पर विचार करेंगे।
आप जानते हैं कि प्रत्येक रूट ऑब्जेक्ट के लिए
आप errorElement गुण जोड़ सकते हैं
और मान के रूप में उस एलिमेंट को सेट कर सकते हैं
जिसे आप त्रुटि होने पर प्रदर्शित करना चाहते हैं।
लेकिन क्या होगा अगर हमारे सभी रूट्स के लिए
errorElement एक जैसा हो? बेशक,
हर एक के लिए एक ही चीज़ को बार-बार लिख सकते हैं,
या फिर बिना पथ के रूट का उपयोग कर सकते हैं,
उसमें हमारे इच्छित चाइल्ड रूट्स को रैप कर सकते हैं।
तब उनमें से किसी एक पर त्रुटि होने पर,
हमारा बिना पथ का रूट उन्हें कैच करेगा और
अपना errorElement प्रदर्शित करेगा।
चलिए main.jsx फाइल में जाते हैं और
हमारे सभी चाइल्ड रूट्स को बिना पथ के रूट में रैप करते हैं,
उन्हें इसके चाइल्ड बनाकर (बदले में
यह रूट रूट रूट का चाइल्ड बन जाएगा),
इसे errorElement गुण भी जोड़ना न भूलें:
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage404 />,
loader: rootLoader,
action: rootAction,
children: [
{
errorElement: <ErrorPage404 />,
children: [
{ index: true, element: <Index /> },
{
path: 'products/:productId',
element: <Product />,
loader: productLoader,
},
{
path: 'products/:productId/edit',
element: <EditProduct />,
loader: editProductLoader,
action: editAction,
},
{
path: 'products/:productId/delete',
action: deleteAction,
},
],
},
],
},
]);
अब इस कोड के काम की जांच कैसे करें?
त्रुटि फेंकने वाली एक लाइन जोड़ सकते हैं
(जांच करने के बाद इसे हटाना न भूलें)।
चलिए, उदाहरण के लिए,
इसे प्रोडक्ट डिलीट रूट के लिए
action फंक्शन में पहली लाइन के रूप में जोड़ते हैं,
तब प्रोडक्ट डिलीट करने का प्रयास करने पर
हमें त्रुटि दिखाई देगी:
export async function action({ params }) {
throw new Error('error');
await deleteProduct(params.productId);
return redirect('/');
}
अब किसी प्रोडक्ट को डिलीट करने का प्रयास करें।
पिछले पाठों के असाइनमेंट्स में आपके द्वारा बनाए गए
ऐप्लिकेशन को लें। पाठ की सामग्री का उपयोग करते हुए,
अपने चाइल्ड रूट्स को बिना पथ के रूट में
errorElement गुण के साथ रैप करें और जांचें
कि यह काम करता है।
