React Router-da Not Found Sehvini Emal Etmek

Tətbiq yaradarkən onun sonrakı istifadəsi prosesində müxtəlif səhvlərin yaranmasına da diqqət yetirmək lazımdır. Bu dersdə biz 'Not Found' sehvi ile işləməyi oyrənəcəyik. Belə bir səhv, məsələn, istifadəçi mövcud olmayan bir səhifəyə aparan linkə kliklədikdə yarana bilər.

Əvvəlcə əvvəlki dərslərdə etdiyimiz tətbiqimizi açaq və Root komponentinin verdiyini əvəz edək. İndi tətbiqi işə saldıqda bizdə iki məhsulun siyahısı görünəcək:

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

export default Root;

index.css faylına bir az stil əlavə edək:

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

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

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

İndi isə linklərə klikləyin. Bizim məhsullarımız üçün səhifə maketlərimiz olmadığından linklər bizi yalnız '404 Not Found' səhv ekranına aparacaq və React Router-in bizim üçün göstərdiyindən daha gözəl və daha maraqlı bir şey tapa biləcəyimiz barədə kinayə ilə qarşılayacaq.

Gəlin 404 səhvi yaranarsa görünəcək öz səhifəmizi edək. Bunun üçün src qovluğunda error-page-404.jsx faylı yaradaq.

ErrorPage404 React komponentinin içində biz səhvi yaxalamaq üçün useRouteError hook-undan istifadə edəcəyik, biz onu konsola çıxaracağıq:

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

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

}

export default ErrorPage404;

Daha sonra ErrorPage404 komponentinin verdiyində biz səhv barədə məlumat verən bir neçə başlıq göstərəcəyik və error obyektinin statusText və data kimi xassələrini çıxaracağıq (error obyektini və onun xassələrini siz də konsolu açıb tətbiqdə linklərimizə kliklədikdə görə bilərsiniz).

return (
	<div>
		<h1>Salam! Bu bir Səhv Səhifəsidir</h1>
		<h2>404 Tapılmadı Səhvi</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Mütləq main.jsx faylını açıb ErrorPage404 ilə bağlı daha bir import sətri əlavə etməyi unutmayın:

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

Həmçinin Router obyektinə daha bir errorElement xassəsi əlavə edin - bu element bu marşrutda səhv yaranarsa göstərilir. Səhv elementinin qiyməti bizim ErrorPage404 komponentimiz olacaq:

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

Əvvəlki dərsin tapşırığında yaratdığınız tətbiqi götürün. Ana səhifəyə dərsdə göstərildiyi kimi bir neçə linkdən ibarət siyahı əlavə edin. Linklərin href qiymətləri - /students/1 və /students/2, linklərin mətni isə müvafiq olaraq 'Student1' və 'Student2' olsun. Linklərə kliklədikdə React Router-in standart olaraq göstərdiyi səhv ekranının çıxdığına əmin olun.

İndi isə öz ayrıca 404 səhv səhifənizi yaradın, istədiyiniz şeyi orada göstərə bilərsiniz. Onu dərsdə göstərildiyi kimi qoşun. İndi isə linklərə kliklədikdə onun özünüzə düşdüyünüzə əmin olun.