Obdelava napake Not Found v React Router

Pri ustvarjanju aplikacije je treba posvetiti pozornost tudi pojavljanju različnih napak med njeno nadaljnjo uporabo. V tej lekciji se bomo naučili delati z napako 'Not Found'. Taka napaka se lahko pojavi, na primer, če uporabnik klikne na povezavo, ki vodi na neobstoječo stran.

Za začetek odprimo našo aplikacijo, ki smo jo izdelovali v prejšnjih lekcijah, in zamenjajmo postavitev komponente Root. Zdaj bo ob zagonu aplikacije prikazan seznam dveh izdelkov:

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

export default Root;

Dodajmo nekaj stilov v index.css:

body {
	font-size: 18px;
	line-height: 1.5;
}

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

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

In zdaj klikajte na povezave. Ker nimamo predlog strani za naše izdelke, nas bodo povezave pripeljale le na zaslon z napako '404 Not Found' in opozorilom, da bi si lahko sami izmislili nekaj lepšega in zanimivejšega kot tisto, kar nam je React Router prikazal po privzetem.

Naredimo našo lastno stran, ki se bo prikazala v primeru pojavitve napake 404. Za to v mapi src ustvarimo datoteko error-page-404.jsx.

Znotraj React komponente ErrorPage404 bomo uporabili kavelj useRouteError za ujemanje napake, ki jo bomo izpisali v konzolo:

import { useRouteError } from 'react-router-dom';

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

}

export default ErrorPage404;

Nato bomo v postavitvi komponente ErrorPage404 prikazali par naslovov, ki sporočajo o napaki in izpisali takšne lastnosti objekta error, kot so statusText in data (objekt error in njegove lastnosti lahko vidite tudi, če odprete konzolo in začnete klikati na naše povezave v aplikaciji).

return (
	<div>
		<h1>Živjo! To je stran z napako</h1>
		<h2>Napaka 404 Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Ne pozabite odpreti datoteke main.jsx in dodati še eno vrstico uvoza s ErrorPage404:

import ErrorPage404 from './error-page-404';

In dodajte še eno lastnost errorElement v objekt Router - ta element se prikaže, ko na tej poti pride do napake. Vrednost elementa napake bo naša komponenta ErrorPage404:

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogi iz prejšnje lekcije. Dodajte na domačo stran seznam, sestavljen iz nekaj povezav, kot je prikazano v lekciji. Naj bodo vrednosti href povezav - /students/1 in /students/2, besedilo povezav pa 'Student1' in 'Student2'. Prepričajte se, da ob kliku na povezave prikaže zaslon z napako, ki jo React Router izpiše po privzetem.

In zdaj ustvarite svojo lastno stran z napako 404, lahko na njej prikažete kar želite. Povežite jo, kot je prikazano v lekciji. In prepričajte se, da ob kliku na povezave pridete prav nanjo.