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:

function 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:

body {
	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:

import { 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).

return (
	<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:

import 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:

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

Vegye az ön által az előző leckéhez készített alkalmazást. Adjon hozzá a főoldalra egy listát, amely néhány linkből áll, ahogyan azt a leckében is láthatja. A linkek href értékei legyenek - /students/1 és /students/2, a linkek szövege pedig - 'Student1' és 'Student2'. Győződjön meg róla, hogy a linkekre kattintva megjelenik a hibaüzenet, amelyet a React Router alapértelmezetten megjelenít.

És most készítse el saját, külön 404-es hibaoldalát, kiírhat rá bármit, amit csak szeretne. Kapcsolja be, ahogyan a leckében is látható. És most győződjön meg róla, hogy a linkekre kattintva erre az oldalra kerül.