Die Verwerking van 'Not Found'-foute in React Router

Wanneer jy 'n toepassing skep, moet jy ook aandag gee aan die verskyning van verskeie foute tydens die verdere gebruik daarvan. In hierdie les sal ons leer hoe om met die fout 'Not Found' te werk. So 'n fout kan voorkom, byvoorbeeld, as 'n gebruiker op 'n skakel klik wat na 'n nie-bestaande bladsy lei.

Om mee te begin, laat ons ons toepassing oopmaak wat ons in vorige lesse gebou het, en die opmaak van die komponent Root vervang. Nou sal, wanneer die toepassing begin, 'n lys van twee produkte vertoon word:

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

export default Root;

Laat ons 'n bietjie styl byvoeg in index.css:

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

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

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

Klik nou op die skakels. Aangesien ons geen bladsy-uitlegte vir ons produkte het nie, sal die skakels ons net na 'n skerm met die fout '404 Not Found' lei en 'n teregwysing dat ons self iets mooiers en meer interessants kon bedink het as wat React Router vir ons vertoon het by verstek.

Laat ons ons eie bladsy skep wat vertoon sal word in die geval van 'n 404-fout. Om dit te doen, skep in die gids src die lêer error-page-404.jsx.

Binne die React-komponent ErrorPage404 sal ons die hok useRouteError gebruik om die fout vas te vang, wat ons in die konsole sal afdruk:

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

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

}

export default ErrorPage404;

Vervolgens sal ons in die opmaak van die komponent ErrorPage404 'n paar opskrifte vertoon wat oor die fout berig en ons sal sulke eienskappe van die voorwerp error afdruk, soos statusText en data (die voorwerp error en sy eienskappe kan jy ook sien as jy die konsole oopmaak en op ons skakels in die toepassing begin klik).

return (
	<div>
		<h1>Hi! Dit is 'n Foutbladsy</h1>
		<h2>404 Not Found Fout</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Moet asseblief nie vergeet om die lêer main.jsx oop te maak nie en nog 'n invoerlyn met ErrorPage404 by te voeg:

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

En voeg ook nog 'n eienskap errorElement by in die voorwerp Router - hierdie element word vertoon wanneer 'n fout op hierdie roete voorkom. Die waarde van die foutelement sal ons komponent ErrorPage404 wees:

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

Neem die toepassing wat jy in die opdrag vir die vorige les geskep het. Voeg op die hoofblad 'n lys by wat uit 'n paar skakels bestaan, soos in die les getoon. Laat die waardes van die href van die skakels /students/1 en /students/2 wees, en die teks van die skakels - 'Student1' en 'Student2' onderskeidelik. Maak seker dat wanneer jy op die skakels klik daar 'n skerm met die fout verskyn wat React Router by verstek vertoon.

En nou, skep jou eie aparte bladsy met 'n 404-fout, jy kan daarop uitdruk wat jy wil. Koppel dit soos in die les getoon. En maak nou seker dat wanneer jy op die skakels klik, jy presies daarop beland.