Håndtering av Not Found-feil i React Router

Ved opprettelse av en applikasjon må man ta hensyn til og håndtere ulike feil som kan oppstå under dens bruk. I denne leksjonen vil vi lære å jobbe med 'Not Found'-feil. En slik feil kan vises, for eksempel, hvis en bruker klikker på en lenke som fører til en ikke-eksisterende side.

La oss først åpne applikasjonen vår, som vi jobbet med i forrige leksjoner, og erstatte utformingen av komponenten Root. Nå vil det, ved oppstart av applikasjonen, vises en liste med to produkter:

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

export default Root;

La oss legge til litt stiler i index.css:

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

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

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

Prøv å klikk på lenkene nå. Siden vi ikke har noen sidemaler for produktene våre, vil lenkene bare føre oss til en skjerm med '404 Not Found'-feil og en bemerkning om at vi kunne ha kommet på noe mer fengende og interessant enn det React Router viste oss som standard.

La oss lage vår egen side, som vil vises i tilfelle en 404-feil oppstår. For å gjøre dette, i mappen src, la oss opprette filen error-page-404.jsx.

Inne i React-komponenten ErrorPage404 vil vi bruke hooken useRouteError for å fange opp feilen, som vi vil logge til konsollen:

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

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

}

export default ErrorPage404;

Deretter, i utformingen av komponenten ErrorPage404, vil vi vise et par overskrifter som informerer om feilen og vi vil vise egenskaper som statusText og data fra error-objektet (error-objektet og dets egenskaper kan du også se hvis du åpner konsollen og begynner å klikke på lenkene i applikasjonen).

return (
	<div>
		<h1>Hei! Dette er en feilside</h1>
		<h2>404 Not Found-feil</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Husk å åpne filen main.jsx og legge til en linje til for import av ErrorPage404:

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

Og legg til en egenskap til errorElement i Router-objektet - dette elementet vises når en feil oppstår på denne ruten. Verdien for feilelementet vil være komponenten vår ErrorPage404:

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

Ta applikasjonen du opprettet i oppgaven til forrige leksjon. Legg til på hjemmesiden en liste som består av et par lenker, som vist i leksjonen. La verdiene for href til lenkene være - /students/1 og /students/2, og lenketeksten - 'Student1' og 'Student2' henholdsvis. Forsikre deg om at når du klikker på lenkene du får en skjerm med feilen som React Router viser som standard.

Opprett nå din egen separate side for 404-feil, du kan vise hva du ønsker på den. Koble den til, som vist i leksjonen. Forsikre deg nå om at når du klikker på lenkene havner du nettopp på den.