React Router-da Not Found Sehvini Emal Etmek

Tətbiq yaradarkən onun sonrakı istifadəsi prosesində müxtəlif səhvlərin yaranmasına da diqqət yetirmək lazımdır. Bu dersdə biz 'Not Found' sehvi ile işləməyi oyrənəcəyik. Belə bir səhv, məsələn, istifadəçi mövcud olmayan bir səhifəyə aparan linkə kliklədikdə yarana bilər.

Əvvəlcə əvvəlki dərslərdə etdiyimiz tətbiqimizi açaq və Root komponentinin verdiyini əvəz edək. İndi tətbiqi işə saldıqda bizdə iki məhsulun siyahısı görünəcək:

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

export default Root;

index.css faylına bir az stil əlavə edək:

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

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

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

İndi isə linklərə klikləyin. Bizim məhsullarımız üçün səhifə maketlərimiz olmadığından linklər bizi yalnız '404 Not Found' səhv ekranına aparacaq və React Router-in bizim üçün göstərdiyindən daha gözəl və daha maraqlı bir şey tapa biləcəyimiz barədə kinayə ilə qarşılayacaq.

Gəlin 404 səhvi yaranarsa görünəcək öz səhifəmizi edək. Bunun üçün src qovluğunda error-page-404.jsx faylı yaradaq.

ErrorPage404 React komponentinin içində biz səhvi yaxalamaq üçün useRouteError hook-undan istifadə edəcəyik, biz onu konsola çıxaracağıq:

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

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

}

export default ErrorPage404;

Daha sonra ErrorPage404 komponentinin verdiyində biz səhv barədə məlumat verən bir neçə başlıq göstərəcəyik və error obyektinin statusText və data kimi xassələrini çıxaracağıq (error obyektini və onun xassələrini siz də konsolu açıb tətbiqdə linklərimizə kliklədikdə görə bilərsiniz).

error-page-404.jsxreturn (
  <div>
    <h1>Salam! Bu bir Səhv Səhifəsidir</h1>
    <h2>404 Tapılmadı Səhvi</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

Mütləq main.jsx faylını açıb ErrorPage404 ilə bağlı daha bir import sətri əlavə etməyi unutmayın:

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

Həmçinin Router obyektinə daha bir errorElement xassəsi əlavə edin - bu element bu marşrutda səhv yaranarsa göstərilir. Səhv elementinin qiyməti bizim ErrorPage404 komponentimiz olacaq:

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