React Routerда Not Found хатолигини ишловлаш

Илова яратишда унинг кейинги фойдаланиш жараёнида турли хатоликларнинг пайдо бўлишига ҳам эътибор қаратиш керак. Ушбу дарсда биз 'Not Found' хатолиги билан ишлашни ўрганамиз. Бундай хатолик, масалан, фойдаланувчи мавжуд бўлмаган саҳифага олиб борадиган ҳаволани босганда пайдо бўлиши мумкин.

Бошлаш учун аввалги дарсларда биз яратган илованимизни ochамиз ва Root компонентининг версткасини алмаштирамиз. Энди иловани ишга туширганда бизда иккита маҳсулотдан иборат рўйхат кўрсатилади:

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

export default Root;

index.css файлига озгина стил қўшамиз:

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

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

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

Ҳозир ҳаволаларни босиб кўринг. Бизда маҳсулотларимиз учун саҳифа макетлари йўқлиги сабабли, ҳаволалар бизни фақат '404 Not Found' хатолик экранига олади ва React Router биз учун белгилаган стандарт кўрсатилган нарсадан кўра яхшироқ ва қизиқроқ нарсани ўзимиз топа оламиз, деб мазах қилади.

Келинг, 404 хатолик юз берганда кўрсатиладиган ўз саҳифанимизни яратайлик. Бунинг учун src папкасида error-page-404.jsx файлини яратамиз.

ErrorPage404 React компоненти ичида биз консольга чиқарадиган хатоликни ushlash учун useRouteError хукидан фойдаланамиз:

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

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

}

export default ErrorPage404;

Кейин ErrorPage404 компонентининг версткасида биз хатолик ҳақида хабар берадиган бир нечта сарлавҳаларни кўрсатамиз ва error объектининг statusText ва data каби хоссаларини чиқарамиз (error объекти ва унинг хоссаларини сиз консолни ochиб, иловадаги ҳаволаларни босганда ҳам кўришингиз мумкин).

return (
	<div>
		<h1>Салом! Бу Хатолик Саҳифаси</h1>
		<h2>404 Топилмади Хатолиги</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx файлини ochишни унутманг ва ErrorPage404 билан боғлиқ яна бир импорт сатрини қўшинг:

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

Шунингдек, Router объектига яна бир errorElement хоссасини қўшинг - бу элемент ушбу маршрутда хатолик юз берганда кўрсатилади. Хатолик элементининг қиймати бизнинг ErrorPage404 компонентимиз бўлади:

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

Аввалги дарс учун топшириқда яратган иловангизни oling. Бош саҳифага дарсда кўрсатилгани каби жуфт ҳаволадан иборат рўйхатни қўшинг. Ҳаволаларнинг href қийматлари - /students/1 ва /students/2, ҳавола матнлари эса мос равишда 'Student1' ва 'Student2' бўлсин. Ҳаволаларни босганда сизда React Router томонидан стандарт холда кўрсатиладиган хатолик экрани пайдо бўлишига ишонч ҳосил қилинг.

Энди ўз 404 хатолик саҳифангизни яратинг, унга хоҳлаган нарсангизни чиқаришингиз мумкин. Уни дарсда кўрсатилгани каби уланг. Энди ҳаволаларни босганда сиз анан шу саҳифага тушаётганингизга ишонч ҳосил қилинг.