A Not Found hiba kezelése a React Routerben

Az alkalmazás létrehozásakor figyelni kell a különböző hibák megjelenésére is a további használata során. Ebben a leckében megtanuljuk kezelni a 'Not Found' hibát. Ez a hiba előfordulhat, például ha a felhasználó egy olyan linkre kattint, ami egy nem létező oldalra vezet.

Kezdésként nyissuk meg az alkalmazásunkat, amelyet az előző leckéken készítettünk, és cseréljük le a Root komponens megjelenését. Mostantól az alkalmazás indításakor két termék listája jelenik meg:

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

export default Root;

Adjunk hozzá néhány stílust a index.css fájlhoz:

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

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

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

És most kattintsunk a linkekre. Mivel nincsenek oldalelrendezéseink a termékeinkhez, a linkek csak a '404 Not Found' hibaüzenethez vezetnek, azzal a megjegyzéssel, hogy ki tudtunk volna találni valami szebb és érdekesebb dolgot, mint amit a React Router alapértelmezetten megjelenített számunkra.

Készítsük el a saját oldalunkat, amely akkor jelenik meg, ha a 404 hiba fellép. Ehhez a src mappában hozzunk létre egy error-page-404.jsx fájlt.

A ErrorPage404 React komponensen belül használjuk a useRouteError hookot a hiba elkapásához, amelyet kiírunk a konzolra:

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

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

}

export default ErrorPage404;

Ezután a ErrorPage404 komponens megjelenésében megjelenítünk pár címsort, amelyek a hibáról tájékoztatnak, és kiírjuk a error objektum olyan tulajdonságait, mint a statusText és a data (az error objektumot és tulajdonságait akkor is láthatja, ha megnyitja a konzolt és elkezd kattintani a linkjeinken az alkalmazásban).

error-page-404.jsxreturn (
  <div>
    <h1>Szia! Ez egy Hibás Oldal</h1>
    <h2>404 Not Found hiba</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

Mindenképpen ne felejtse el megnyitni a main.jsx fájlt és hozzáadni még egy import sort a ErrorPage404 komponenssel:

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

És adjon hozzá még egy tulajdonságot, a errorElement-t a Router objektumhoz - ez az elem jelenik meg, amikor hiba történik az adott útvonalon. A hiba elem értéke lesz a ErrorPage404 komponensünk:

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