Uchakataji wa Kosa la Not Found katika React Router

Wakati wa kuunda programu, ni muhimu kuzingatia na kutatua makosa mbalimbali yanaweza kutokea katika mchakato wa matumizi yake baadaye. Katika somo hili tutajifunza jinsi ya kufanya kazi na kosa la 'Not Found'. Kosa kama hilo linaweza kutokea, kwa mfano, ikiwa mtumiaji atabonyeza kiunga kinachoongoza kwenye ukurasa usiopo.

Kwanza, wacha tufungue programu yetu, ambayo tulikuwa tukifanya katika masomo yaliyopita, na tubadilishe muundo wa sehemu Root. Sasa wakati wa kuanzisha programu, tutakuwa na orodha ya bidhaa mbili inayoonyeshwa:

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

export default Root;

Wacha tuongeze mitindo kidogo kwenye index.css:

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

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

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

Na sasa bonyeza kwenye viunga. Kwa kuwa hakutuna miundo ya kurasa za bidhaa zetu, viunga vitatupeleka tu kwenye skrini yenye kosa '404 Not Found' na mafundisho kuhusu kwamba tungeliweza kufikiria kitu chenye kupendeza zaidi na cha kuvutia zaidi kuliko kile React Router kilichoonyesha chini ya chaguo-msingi.

Wacha tuunde ukurasa wetu wenyewe, ambao utaonyeshwa ikiwa kosa la 404 litatokea. Ili kufanya hivyo, kwenye folda src tutaunda faili error-page-404.jsx.

Ndani ya sehemu ya React ErrorPage404 tutatumia kuingiza useRouteError kwa kunasa kosa, ambalo tutaweza kuonyesha kwenye konsoli:

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

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

}

export default ErrorPage404;

Ifuatayo, kwenye muundo wa sehemu ErrorPage404 tutaonyesha vichwa vya habari kadhaa, vinavyoripoti kosa na tutaonyesha sifa za kitu error kama vile statusText na data (kitu error na sifa zake unaweza pia kuona ikiwa utafungua konsoli na kuanza kubonyeza kwenye viunga vyetu kwenye programu).

return (
	<div>
		<h1>Habari! Huu ni Ukurasa wa Kosa</h1>
		<h2>Kosa la 404 Haipatikani</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Hakikisha umefungua faili main.jsx na kuongeza mstari mmoja zaidi wa kuagiza ErrorPage404:

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

Na pia ongeza sifa nyingine errorElement kwenye kitu Router - kipengele hiki kinaonyeshwa linapotokea kosa kwenye njia hii. Thamani ya kipengele cha kosa itakuwa sehemu yetu ErrorPage404:

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

Chukua programu uliyoiumba kwa kazi ya somo lililopita. Ongeza kwenye ukurasa wa kwanza orodha, inayojumuisha viunga viwili, kama inavyoonyeshwa kwenye somo. Acha thamani za href viunga viwe - /students/1 na /students/2, na maandishi ya viunga viwe 'Student1' na 'Student2' ipasavyo. Hakikisha kuwa unapobonyeza kwenye viunga skrini yenye kosa inaonekana, ambayo React Router inaonyesha chini ya chaguo-msingi.

Na sasa unda ukurasa wako mwenyewe wa kosa 404, unaweza kuonyesha juu yake kile, unachotaka. Unganisha, kama inavyoonyeshwa kwenye somo. Na sasa hakikisha kuwa unapobonyeza kwenye viunga unafika hasa kwenye ukurasa huo.