React Router में Not Found त्रुटि को संभालना

एप्लिकेशन बनाते समय इस पर ध्यान देना चाहिए और इसके बाद के उपयोग के दौरान विभिन्न त्रुटियों की उपस्थिति पर भी। इस पाठ में हम त्रुटि के साथ काम करना सीखेंगे 'Not Found'। ऐसी त्रुटि तब सामने आ सकती है, उदाहरण के लिए, यदि उपयोगकर्ता किसी ऐसे लिंक पर क्लिक करता है जो एक मौजूदा पेज पर नहीं जाता।

शुरुआत के लिए, आइए हमारा एप्लिकेशन खोलें, जो हमने पिछले पाठों में बनाया था, और Root कंपोनेंट की मार्कअप को बदल दें। अब एप्लिकेशन लॉन्च करने पर हमारे पास दो उत्पादों की सूची दिखाई देगी:

routes/root.jsxfunction Root() {
  return (
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
  );
}

export default Root;

index.css में कुछ स्टाइल्स जोड़ें:

index.cssbody {
  font-size: 18px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: blue;
}

और अब लिंक्स पर क्लिक करें। चूंकि हमारे पास हमारे उत्पादों के लिए पेज लेआउट नहीं हैं, तो लिंक्स हमें केवल '404 Not Found' त्रुटि स्क्रीन पर ले जाएंगे और इस बात की ताड़ना करेंगे कि हम React Router द्वारा हमें डिफ़ॉल्ट रूप से दिखाई गई चीज़ से बेहतर और दिलचस्प कुछ बना सकते थे।

आइए हम अपना खुद का पेज बनाएं, जो 404 त्रुटि होने की स्थिति में दिखाई देगा। इसके लिए src फोल्डर में error-page-404.jsx फाइल बनाएं।

React कंपोनेंट ErrorPage404 के अंदर हम त्रुटि को पकड़ने के लिए useRouteError हुक का उपयोग करेंगे, जिसे हम कंसोल में प्रिंट करेंगे:

error-page-404.jsximport { useRouteError } from 'react-router-dom';

function ErrorPage404() {
  const error = useRouteError();
  console.error(error);

}

export default ErrorPage404;

इसके बाद ErrorPage404 कंपोनेंट के मार्कअप में हम त्रुटि के बारे में बताने वाले कुछ हेडिंग्स दिखाएंगे और error ऑब्जेक्ट के गुण जैसे statusText और data को प्रदर्शित करेंगे (error ऑब्जेक्ट और इसके गुण आप कंसोल खोलकर और हमारे एप्लिकेशन में लिंक्स पर क्लिक करके भी देख सकते हैं)।

error-page-404.jsxreturn (
  <div>
    <h1>नमस्ते! यह एक त्रुटि पेज है</h1>
    <h2>404 Not Found त्रुटि</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

main.jsx फाइल खोलना न भूलें और ErrorPage404 के साथ आयात की एक और पंक्ति जोड़ें:

main.jsximport ErrorPage404 from './error-page-404';

और Router ऑब्जेक्ट में errorElement गुण भी जोड़ें - यह एलिमेंट तब दिखाई देता है, जब इस रूट पर कोई त्रुटि उत्पन्न होती है। त्रुटि एलिमेंट का मान हमारा कंपोनेंट ErrorPage404 होगा:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
  },
]);