Trajtimi i Gabimit Not Found në React Router

Gjatë krijimit të një aplikacioni, duhet t'i kushtohet vëmendje edhe shfaqjes së gabimeve të ndryshme në procesin e përdorimit të tij të mëtejshëm. Në këtë mësim do të mësojmë të punojmë me gabimin 'Not Found'. Një gabim i tillë mund të shfaqet, për shembull, nëse përdoruesi klikon në një link që çon në një faqe që nuk ekziston.

Për të filluar, le të hapim aplikacionin tonë, që e kemi bërë në mësimet e mëparshme, dhe të zëvendësojmë markup-in e komponentit Root. Tani gjatë nisjes së aplikacionit do të shfaqet një listë me dy produkte:

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

export default Root;

Le të shtojmë pak stile në index.css:

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

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

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

Dhe tani klikoni në linka. Meqenëse ne nuk kemi layout-e faqesh për produktet tona, link-et do të na çojnë vetëm në ekranin me gabimin '404 Not Found' dhe një qortim se ne mund të kishim shpikur vetë diçka më të bukur dhe më interesante, sesa ajo që React Router na shfaqi si parazgjedhje.

Le të bëjmë faqen tonë të vetme, që do të shfaqet në rast të shfaqjes së gabimit 404. Për këtë, në dosjen src le të krijojmë skedarin error-page-404.jsx.

Brenda komponentit React ErrorPage404 ne do të përdorim hook-un useRouteError për kapjen e gabimit, të cilin do ta shfaqim në konsol:

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

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

}

export default ErrorPage404;

Më pas, në markup-in e komponentit ErrorPage404 ne do të shfaqim disa tituj, që informojnë për gabimin dhe do të shfaqim disa veti të objektit error, si statusText dhe data (objektin error dhe vetitë e tij ju gjithashtu mund t'i shihni nëse hapni konsolën dhe filloni të klikoni në link-et tona në aplikacion).

return (
	<div>
		<h1>Përshëndetje! Kjo është një Faqe Gabimi</h1>
		<h2>Gabimi 404 Nuk u Gjet</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Patjetër mos harroni të hapni skedarin main.jsx dhe të shtoni një rresht tjetër importi me ErrorPage404:

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

Dhe gjithashtu shtoni një veti tjetër errorElement në objektin Router - ky element shfaqet kur në këtë rrugëtim lind një gabim. Vlera e elementit të gabimit do të jetë komponenti ynë ErrorPage404:

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

Merrni aplikacionin e krijuar nga ju në detyrën e mësimit të kaluar. Shtoni në faqen kryesor një listë, e përbërë nga disa link-a, siç tregohet në mësim. Le të jenë vlerat e href të link-ave - /students/1 dhe /students/2, ndërsa teksti i link-ave - 'Student1' dhe 'Student2' përkatësisht. Sigurohuni që kur klikoni në link-a të shfaqet ekrani me gabimin, të cilin React Router e shfaq si parazgjedhje.

Dhe tani krijoni faqen tuaj të veçantë me gabimin 404, mund të shfaqni në të atë, që dëshironi. Lidheni atë, siç tregohet në mësim. Dhe tani sigurohuni që kur klikoni në link-a të hyni pikërisht në të.