Hantera Not Found-fel i React Router

När man skapar ett applikation måste man också uppmärksamma uppkomsten av olika fel i processen av dess fortsatta användning. I den här lektionen kommer vi att lära oss att arbeta med felet 'Not Found'. Ett sådant fel kan uppstå, till exempel, om en användare klickar på en länk som leder till en sidan som inte finns.

Låt oss först öppna vår applikation, som vi skapade i de tidigare lektionerna, och ersätta innehållet i komponenten Root. Nu när vi startar applikationen kommer vi att visa en lista med två produkter:

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

export default Root;

Låt oss lägga till lite stilar i index.css:

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

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

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

Klicka nu på länkarna. Eftersom vi inte har några layouts för våra produktsidor, kommer länkarna bara att leda oss till en skärm med felet '404 Not Found' och en förebråelse om att vi kunde ha kommit på något vackrare och intressantare än vad React Router visade oss som standard.

Låt oss skapa vår egen sida, som kommer att visas i fallet av ett 404-fel. För att göra detta, i mappen src, skapa en fil error-page-404.jsx.

Inuti React-komponenten ErrorPage404 kommer vi att använda hooken useRouteError för att fånga felet, som vi kommer att skriva ut i konsolen:

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

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

}

export default ErrorPage404;

Sedan, i innehållet av komponenten ErrorPage404, kommer vi att visa ett par rubriker som meddelar om felet och visa sådana egenskaper hos objektet error, som statusText och data (objektet error och dess egenskaper kan du också se om du öppnar konsolen och börjar klicka på våra länkar i applikationen).

return (
	<div>
		<h1>Hej! Det här är en felsida</h1>
		<h2>404 Not Found Error</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Glöm inte att öppna filen main.jsx och lägga till ytterligare en rad import med ErrorPage404:

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

Och lägg också till ytterligare en egenskap errorElement i objektet Router - detta element visas när ett fel uppstår på denna rutt. Värdet på felselementet kommer att vara vår komponent ErrorPage404:

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

Ta applikationen du skapade i uppgiften till förra lektionen. Lägg till på startsidan en lista som består av ett par länkar, som visas i lektionen. Låt värdena för href för länkarna vara - /students/1 och /students/2, och länktexten - 'Student1' och 'Student2' respektive. Se till att när du klickar på länkarna visas en skärm med felet som React Router visar som standard.

Och nu skapa din egen separata sida med felet 404, du kan visa på den vad du vill. Anslut den, som visas i lektionen. Och se nu till att när du klickar på länkarna kommer du just till den.