React Router'до 'Not Found' катасын иштетүү

Колдонмо түзүүдө, аны кийинчерээк колдонуу процессинде ар кандай каталардын пайда болушуна көңүл буруу керек. Бул сабакта биз 'Not Found' катасы менен иштөөнү үйрөнөбүз. Мындай ката, мисалы, колдонуучу жок баракчага алып барган шилтемени чыкылдатканда чыга алат.

Баштоо үчүн, биз мурунку сабактарда жасап жаткан колдонмобузду ачып, 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 компонентинин ичинде, биз консольго чыгара турган катаны кармоо үчүн useRouteError хукун колдонобуз:

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

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

}

export default ErrorPage404;

Кийин ErrorPage404 компонентинин версткасында, ката жөнүндө кабарлай турган бир нече баш аталарды көрсөтөбүз жана error объектисинин statusText жана data сыяктуу касиеттерин чыгарабыз (error объектиси жана анын касиеттерин сиз да, консолду ачып, колдонмодогу шилтемдерди чыкылдатсаңыз, көрө аласыз).

return (
	<div>
		<h1>Салам! Бул Ката Барагы</h1>
		<h2>404 Табылган Жок Катасы</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx файлын ачып, ErrorPage404 менен импорттун дагы бир сабын кошконуңузду унутпаңыз:

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

Ошондой эле, Router объектисине дагы бир errorElement касиетин кошуңуз - бул элемент бул багытта ката чыкканда көрсөтүлөт. Ката элементинин мааниси биздин ErrorPage404 компонентибиз болот:

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

Өткөн сабактагы тапшырма үчүн сиз түзгөн колдонмону алыңыз. Башкы баракчага сабакта көрсөтүлгөндөй, бир нече шилтемеден турган тизме кошуңуз. href шилтемелеринин маанилери - /students/1 жана /students/2 болсун, ал эми шилтемелердин тексти - тиешелүү түрдө 'Student1' жана 'Student2' болсун. Шилтемдерди чыкылдатканда сизде React Router'дүн демейки абалда чыгарган ката экраны пайда болорун текшериңиз.

Эми өзүңүздүн 404 катасы менен жеке баракчаңызды түзүңүз, ага эмнени көрсөткүңүз келсе, ошону чыгара аласыз. Аны сабакта көрсөтүлгөндөй туташтырыңыз. Анан шилтемдерди чыкылдатканда сиз так ушул баракчага түшөрүңүздү текшериңиз.