Kļūdas Not Found apstrāde React Router

Veidojot lietotni, jāpievērš uzmanība arī dažādu kļūdu parādīšanās tās turpmākās lietošanas procesā. Šajā nodarbībā mēs iemācīsimies strādāt ar kļūdu 'Not Found'. Šāda kļūda var parādīties, piemēram, ja lietotājs noklikšķinās uz saites, kas ved uz neesošu lapu.

Vispirms atvērsim mūsu lietotni, ko mēs veidojām iepriekšējās nodarbībās, un aizstāsim komponenta Root marķējumu. Tagad palaižot lietotni mums tiks parādīts saraksts ar diviem produktiem:

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

export default Root;

Pievienosim nedaudz stilus index.css:

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

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

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

Un tagad noklikšķiniet pa saitēm. Tā kā mums nav lapu maketu mūsu produktiem, tad saites novedīs mūs tikai uz ekrānu ar kļūdu '404 Not Found' un pārmetumu, ka mēs varējām izdomāt paši kaut ko skaistāku un interesantāku, nekā to, ko React Router mums parādīja pēc noklusējuma.

Izveidosim mūsu pašu lapu, kas tiks parādīta gadījumā ja parādās kļūda 404. Lai to izdarītu, mapē src izveidosim failu error-page-404.jsx.

React komponenta ErrorPage404 iekšienē mēs izmantosim āķi useRouteError, lai notvertu kļūdu, kuru mēs izvadīsim konsolē:

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

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

}

export default ErrorPage404;

Tālāk komponenta ErrorPage404 marķējumā mēs parādīsim pāris virsrakstus, kas informē par kļūdu, un izvadīsim tādas objekta error īpašības kā statusText un data (objektu error un tā īpašības jūs varat redzēt arī, ja atvērsiet konsoli un sāksit noklikšķināt pa mūsu saitēm lietotnē).

return (
	<div>
		<h1>Sveiki! Šī ir Kļūdas Lapa</h1>
		<h2>404 Not Found Kļūda</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Noteikti neaizmirstiet atvērt failu main.jsx un pievienot vēl vienu rindu importam ar ErrorPage404:

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

Un arī pievienojiet vēl vienu īpašību errorElement objektam Router - šis elements tiek izvadīts, kad šajā maršrutā rodas kļūda. Kļūdas elementa vērtība būs mūsu komponents ErrorPage404:

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

Paņemiet lietotni, ko izveidojāt uzdevumā iepriekšējai nodarbībai. Pievienojiet galvenajā lapā sarakstu, kas sastāv no pāris saitēm, kā parādīts nodarbībā. Lai saites href vērtības būtu - /students/1 un /students/2, bet saišu teksts - 'Student1' un 'Student2' attiecīgi. Pārliecinieties, ka noklikšķinot pa saitēm jums parādās ekrāns ar kļūdu, kuru React Router izvada pēc noklusējuma.

Un tagad izveidojiet savu atsevišķu lapu ar kļūdu 404, varat uz tās izvadīt to, ko vēlaties. Pievienojiet to, kā parādīts nodarbībā. Un tagad pārliecinieties, ka noklikšķinot pa saitēm jūs nokļūstat tieši uz to.