React Router-daky Not Found ýalňyşlygyny işlemek

Programma döredilende, onuň soňky ulanylyşy prosesinde dürli ýalňyşlyklaryň ýüze çykmagyna üns bermek hem zerur. Bu sapakda biz 'Not Found' ýalňyşlygy bilen işlemegi öwreneris. Şeýle ýalňyşlyk, mysal üçin, ulanyjy bar bolmadyk sahypa ýetirýän çykgyda basanda ýüze çykyp biler.

Başlangyçda, öňki sapaklarda ýasap geçen programmamyzy açalyň we Root komponentiniň görnüşini çalyşdyryp goýalyň. Indi programma işlände, bize iki önümiň sanawy görkeziler:

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

export default Root;

index.css faýlyna birnäçe stili goşalyň:

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

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

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

Indi bolsa çykgylara basyp görüň. Önümlerimiz üçin hiç hili sahypa maketlerimiz bolmadygy üçin, çykgylar bizi diňe '404 Not Found' ýalňyşlyk ekranyna we React Router-üň bize deslapky ornunda görkezeninden gözellikde we gyzyklyrak bir zady özümiz ýetirip bilerdigimiz hakda günäkärlemäge getirer.

404 ýalňyşlygy ýüze çykanda görkeziljek öz sahypamyzy ýasaýalyň. Bunuň üçin src papkasyna error-page-404.jsx faýljygyny dörediň.

ErrorPage404 React komponentiniň içinde, konsolda çap ederis diýip ýalňyşlygy tutmak üçin useRouteError çeňňegini ulanarys:

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

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

}

export default ErrorPage404;

Soňra, ErrorPage404 komponentiniň görnüşinde ýalňyşlyk barada habar berýän birnäçe at ýazgysyny görkezeris we error obýektiniň statusText we data ýaly aýratynlyklaryny çap ederis (error obýektini we onuň aýratynlyklaryny programmadaky çykgylara basanda konsoly açyp hem görüp bilersiňiz).

return (
	<div>
		<h1>Salam! Bu Ýalňyşlyk Sahypasy</h1>
		<h2>404 Tapylmadyk Ýalňyşlygy</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx faýlyny açmak we ErrorPage404 bilen import setirini goşmakdan ýadamadygyňyzy anyk ediň:

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

Şeýle hem, Router obýektine ýene bir aýratynlyk errorElement goşuň - bu element şu ýol üstünde ýalňyşlyk ýüze çykanda görkeziler. Ýalňyşlyk elementiniň bahasy biziň ErrorPage404 komponentimiz bolar:

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

Öňki sapaga degişli tabşyrykda ýasap geçen programmaňyzy alyň. Baş sahypa, sapakda görkezilişi ýaly, birnäçe çykgydan ybarat sanaw goşuň. href çykgylarynyň bahalary - /students/1 we /students/2 bolsun, çykgylaryň teksti bolsa degişlilikde 'Student1' we 'Student2' bolsun. Çykgylara basanda React Router-üň deslapky ornunda görkezýän ýalňyşlyk ekranynyň ýüze çykmagyna göz ýetiriň.

Indi bolsa öz aýratyn 404 ýalňyşlyk sahypaňyzy dörediň, onuň üstünde isleýän zadyňyzy görkezip bilersiňiz. Onuň birikdirilişini sapakda görkezilişi ýaly amala aşyryň. Indi çykgylara basanda takyk onuň üstüne düşýändigiňize göz ýetiriň.