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 қате бетіңізді жасаңыз, онда қалағаныңызды шығара аласыз. Оны сабақта көрсетілгендей қосыңыз. Сілтемелерді басқан кезде сіз дәл осы бетке түсетініңізге көз жеткізіңіз.