Viga 404 (Not Found) töötlemine React Routeris

Rakenduse loomisel tuleb tähelepanu pöörata ka erinevate vigade tekkimisele selle hilisema kasutamise käigus. Selles õppetükis õpime töötama veaga 'Not Found'. Selline viga võib tekkida, näiteks kui kasutaja klõpsab lingil, mis viib olematule lehele.

Alustuseks avame oma rakenduse, mida me tegime eelmistel tundidel, ja asendame komponendi Root väljanägemise. Nüüd rakenduse käivitamisel kuvatakse kahest tootest koosnev loend:

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

export default Root;

Lisame natuke stiile faili index.css:

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

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

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

Nüüd klõpsake linkidel. Kuna meil pole meie toodete jaoks lehe makette, siis lingid viivad meid ainult veaekraanile '404 Not Found' koos etteheitega, et me oleksime võinud ise midagi ilusamat ja huvitavamat välja mõelda, kui see, mida React Router meile vaikimisi kuvas.

Loome oma lehe, mida kuvatakse juhul kui tekib viga 404. Selleks kaustas src loome faili error-page-404.jsx.

React komponendi ErrorPage404 sees kasutame hook'i useRouteError vea püüdmiseks, mille me väljastame konsooli:

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

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

}

export default ErrorPage404;

Järgmisena komponendi ErrorPage404 väljanägemises kuvame paari pealkirja, mis teavitavad veast ja väljastame objekti error sellised omadused nagu statusText ja data (objekti error ja selle omadused saate näha ka siis, kui avate konsooli ja hakkate meie linkidele rakenduses klõpsama).

return (
	<div>
		<h1>Tere! See on vealeht</h1>
		<h2>Viga 404 (Not Found)</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Ärge kindlasti unustage avada faili main.jsx ja lisada veel üks import ErrorPage404 jaoks:

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

Ja lisage veel üks omadus errorElement objekti Router - see element kuvatakse, kui sellel marsruudil tekib viga. Veaelemendi väärtuseks on meie komponent ErrorPage404:

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

Võtke rakendus, mille te lõite eelmise tunni ülesande jaoks. Lisage pealehele paarist lingist koosnev loend, nagu on näidatud tunnis. Olgu linkide href väärtusteks - /students/1 ja /students/2, ja linkide tekstiks vastavalt 'Student1' ja 'Student2'. Veenduge, et linkide klõpsamisel tekkib veaekraan, mille React Router kuvab vaikimisi.

Ja nüüd looge oma eraldi leht veaga 404, võite sellel kuvada seda, mida soovite. Ühendage see, nagu on näidatud tunnis. Ja nüüd veenduge, et linkide klõpsamisel saabute just sellele lehele.