Klaidos „Not Found“ apdorojimas „React Router“

Kuriant programą reikia atkreipti dėmesį ir į įvairių klaidų atsiradimą jos vėlesnio naudojimo procese. Šioje pamokoje išmoksime dirbti su klaida 'Not Found'. Tokia klaida gali atsirasti, pavyzdžiui, jei vartotojas paspaus nuorodą, vadiančią į neegzistuojantį puslapį.

Pirmiausia atidarykime mūsų programą, kurią kūrėme ankstesnėse pamokose, ir pakeiskime komponento Root išvaizdą. Dabar paleidus programą mums bus rodomas dviejų produktų sąrašas:

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

export default Root;

Pridėkime šiek tiek stilių į index.css:

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

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

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

O dabar paspauskite nuorodas. Kadangi mes neturime mūsų produktų puslapių maketų, nuorodos mus nuves tik į klaidos ekraną '404 Not Found' ir priekaištu, kad mes galėjome sugalvoti patys ką nors gražesnio ir įdomesnio, nei tai, ką „React Router“ mums atvaizdavo pagal numatytuosius nustatymus.

Sukurkime savo puslapį, kuris bus rodomas tuo atveju, kai atsiranda 404 klaida. Tam aplanke src susikurkime failą error-page-404.jsx.

Viduje React komponento ErrorPage404 mes panaudosime „hook“ useRouteError klaidai gaudyti, kurią mes išvesime į konsolę:

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

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

}

export default ErrorPage404;

Toliau komponento ErrorPage404 išvaizdoje mes atvaizduosime porą antraščių, pranešančių apie klaidą ir išvesime tokias objekto error savybes, kaip statusText ir data (objektą error ir jo savybes taip pat galite pamatyti, jei atidarysite konsolę ir pradėsite spausti mūsų nuorodas programoje).

return (
	<div>
		<h1>Sveiki! Tai klaidos puslapis</h1>
		<h2>404 Nerasta klaida</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Būtinai nepamirškite atidaryti failo main.jsx ir pridėti dar vieną importo eilutę su ErrorPage404:

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

Taip pat pridėkite dar vieną savybę errorElement į objektą Router - šis elementas rodomas, kai šiame maršrute iškyla klaida. Klaidos elemento reikšmė bus mūsų komponentas ErrorPage404:

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

Paimkite programą, kurią sukūrėte užduočiai iš ankstesnės pamokos. Pridėkite į pagrindinį puslapį sąrašą, susidedantį iš poros nuorodų, kaip parodyta pamokoje. Tegul nuorodų href reikšmės bus - /students/1 ir /students/2, o nuorodų tekstas - 'Student1' ir 'Student2' atitinkamai. Įsitikinkite, kad paspaudus nuorodas jums atsiranda ekranas su klaida, kurią „React Router“ rodo pagal numatytuosius nustatymus.

O dabar sukurkite savo atskirį puslapį su klaida 404, galite jame parodyti tai, ką norite. Prijunkite jį, kaip parodyta pamokoje. Ir dabar įsitikinkite, kad paspaudus nuorodas patenkate būtent į jį.