შეცდომის 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, შეგიძლიათ გამოიტანოთ მასზე ის, რაც გსურთ. შეაერთეთ ის, როგორც ნაჩვენებია გაკვეთილში. ახლა კი დარწმუნდით, რომ ბმულებზე წკაპუნებისას თქვენ მოხვდებით ზუსტად მასზე.