React Router'da Not Found xatosini qayta ishlash

Ilova yaratishda uning keyingi foydalanish jarayonida turli xil xatolarning paydo bo'lishiga ham e'tibor berish kerak. Ushbu darsda biz 'Not Found' xatosi bilan ishlashni o'rganamiz. Bunday xato, masalan, foydalanuvchi mavjud bo'lmagan sahifaga olib boradigan havolani bosganida paydo bo'lishi mumkin.

Boshlash uchun oldingi darslarda qilgan ilovamizni ochaylik va Root komponentining verstkasini almashtiramiz. Endi ilovani ishga tushirganimizda ikkita mahsulot ro'yxati ko'rsatiladi:

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

export default Root;

index.css fayliga bir oz uslub qo'shamiz:

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

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

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

Va endi havolalarni bosing. Chunki bizning mahsulotlarimiz uchun sahifa maketlari yo'q, havolalar bizni faqat '404 Not Found' xato ekraniga olib boradi va React Router bizga sukut bo'yicha ko'rsatgan narsadan ko'ra chiroyli va qiziqroq narsani o'zimiz topib olishimiz mumkinligi haqidagi tanbehga olib keladi.

Keling, 404 xatosi paydo bo'lganda ko'rsatiladigan o'zimizning sahifamizni yarataylik. Buning uchun src papkasida error-page-404.jsx faylini yaratamiz.

ErrorPage404 React komponenti ichida biz konsolga chiqarish uchun xatoni ushlashda useRouteError hookidan foydalanamiz:

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

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

}

export default ErrorPage404;

Keyin ErrorPage404 komponentining verstkasida biz xato haqida xabar beradigan bir nechta sarlavhalarni ko'rsatamiz va error ob'ektining statusText va data kabi xususiyatlarini chiqaramiz (error ob'ekti va uning xususiyatlarini siz ham konsolni ochib, ilovadagi havolalarni bosishni boshlashingiz bilan ko'rishingiz mumkin).

return (
	<div>
		<h1>Salom! Bu Xato Sahifasi</h1>
		<h2>404 Topilmadi Xatosi</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx faylini ochib, ErrorPage404 bilan yana bir import qatorini qo'shishni unutmasligingiz kerak:

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

Shuningdek, Router ob'ektiga yana bir errorElement xususiyatini qo'shing - ushbu marshrutda xato yuz berganda bu element ko'rsatiladi. Xato elementining qiymati bizning ErrorPage404 komponentimiz bo'ladi:

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

Oldingi darsdagi vazifa uchun yaratilgan ilovangizni oling. Bosh sahifaga darsda ko'rsatilgandek, bir nechta havolalardan iborat ro'yxat qo'shing. href havolalarining qiymatlari - /students/1 va /students/2 bo'lsin, havola matnlari esa mos ravishda 'Student1' va 'Student2' bo'lsin. Havolalarni bosganingizda sizda React Router sukut bo'yicha chiqaradigan xato ekrani paydo bo'lishiga ishonch hosil qiling.

Endi 404 xatosi uchun o'zingizning alohida sahifangizni yarating, unga xohlaganingizni chiqarishingiz mumkin. Uni darsda ko'rsatilgandek ulang. Endi havolalarni bosganingizda aynan unga tushishingizga ishonch hosil qiling.