Апрацоўка памылкі 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, можаце вывесці на ёй тое, што хочаце. Падключыце яе, як паказана ў уроку. А цяпер пераканайцеся, што пры націску на спасылкі вы трапляеце менавіта на яе.