Not Found хаторо дар React Router коркард кардан

Ҳангоми сохтани барнома бояд ба пайдоиши хатоҳои гуногун дар раванди истифодаи он дар оянда диққат дод. Дар ин дарс мо кор кардан бо хатои '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-ро месозем.

Дар дохили компоненти React ErrorPage404 мо барои гирифтани хато, ки мо ба консол хоҳем фиристод, аз ҳук 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 Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Ҳатман фаромӯш накунед, ки файли main.jsx-ро кушоед ва як сатри дигар импорт бо ErrorPage404 илова кунед:

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

Ва инчунин як хосияти дигар errorElement-ро ба объекти Router илова кунед - ин элемент нишон дода мешавад, вақте ки дар ин роҳи рафт хато рух медиҳад. Қимати элементи хато компоненти мои ErrorPage404 хоҳад буд:

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

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

Ва ҳоло саҳифаи хоси хатои 404-и худро созед, метавонед дар он он чиро, ки мехоҳед, нишон диҳед. Онро, тавре ки нишон дода шуд, пайваст кунед. Ва ҳоло боварӣ ҳосил кунед, ки ҳангоми клик ба пайвандҳо шумо дақиқан ба он мерасед.