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 ֆայլիկ:

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 Չի Գտնվել Սխալ</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 սխալի համար, կարող եք դրա վրա արտածել այն, ինչ ցանկանում եք: Միացրեք այն, ինչպես ցուցադրված է դասում: Եվ հիմա համոզվեք, որ հղումների վրա կտտացնելիս դուք հայտնվում եք հենց դրա վրա: