Håndtering af Not Found-fejl i React Router

Når du opretter en applikation, skal du være opmærksom på opståen af forskellige fejl i processen med dens efterfølgende brug. I denne lektion vil vi lære at arbejde med fejlen 'Not Found'. Sådan en fejl kan opstå, for eksempel, hvis en bruger klikker på et link, der fører til en ikke-eksisterende side.

Lad os først åbne vores applikation, som vi lavede i de foregående lektioner, og erstatte udformingen af komponenten Root. Nu vil vi, når applikationen startes, få vist en liste over to produkter:

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

export default Root;

Lad os tilføje nogle stile til index.css:

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

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

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

Og nu kan du klikke på linkene. Da vi ikke har nogle layouts for vores produktsider, vil linkene kun føre os til en skærm med fejlen '404 Not Found' og en bemærkning om, at vi selv kunne have fundet på noget smukkere og mere interessant end det, React Router viste os som standard.

Lad os lave vores egen side, som vil blive vist i tilfælde af en 404-fejl. For at gøre dette, i mappen src, opret filen error-page-404.jsx.

I React-komponenten ErrorPage404 vil vi bruge hook'et useRouteError til at fange fejlen, som vi vil udskrive i konsollen:

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

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

}

export default ErrorPage404;

Dernæst, i udformingen af komponenten ErrorPage404, vil vi vise et par overskrifter, der informerer om fejlen, og vi vil udskrive sådanne egenskaber ved objektet error som statusText og data (objektet error og dets egenskaber kan du også se, hvis du åbner konsollen og begynder at klikke på vores links i applikationen).

return (
	<div>
		<h1>Hej! Det er en fejlside</h1>
		<h2>404 Not Found Fejl</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Husk at åbne filen main.jsx og tilføje endnu en importlinje for ErrorPage404:

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

Og tilføj også endnu en egenskab errorElement i objektet Router - dette element vises, når der opstår en fejl på denne rute. Værdien for fejlelementet vil være vores komponent ErrorPage404:

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

Tag den applikation, du oprettede i opgaven til den forrige lektion. Tilføj på forsiden en liste, der består af et par links, som vist i lektionen. Lad værdierne for href for linkene være - /students/1 og /students/2, og teksten for linkene - 'Student1' og 'Student2' henholdsvis. Sørg for, at når du klikker på linkene, du får en skærm med den fejl, som React Router viser som standard.

Og nu opret din egen separate side med fejlen 404, du kan vise på den, hvad du ønsker. Tilslut den, som vist i lektionen. Og sørg nu for, at når du klikker på linkene, du netop kommer til den.