React Router හි Not Found දෝෂය හැසිරවීම

යෙදුමක් සාදන විට, එහි අනාගත භාවිතයේදී විවිධ දෝෂ පෙනීමට අවධානය යොමු කළ යුතුය. මෙම පාඩමේදී අපි 'Not Found' දෝෂය සමඟ වැඩ කිරීම ඉගෙන ගනිමු. එවැනි දෝෂයක් පෙනී යා හැකිය, උදාහරණයක් ලෙස, පරිශීලකයා නොපවතින පිටුවකට යොමු කරන සබැඳියක් මත ක්ලික් කරන්නේ නම්.

පළමුව, අපි පෙර පාඩම්වලදී සාදන ලද අපගේ යෙදුම විවෘත කරමු සහ Root සංරචකයේ HTML වින්‍යාසය ප්‍රතිස්ථාපනය කරමු. දැන් යෙදුම ආරම්භ කරන විට අපට නිෂ්පාදන දෙකක ලැයිස්තුවක් පෙන්වනු ඇත:

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;

ඊළඟට, සංරචකයේ HTML වින්‍යාසය තුළ 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' ඒ අනුව. සබැඳි මත ක්ලික් කරන විට බවට වග බලා ගන්න

දැන් ඔබේම වෙනම පිටුවක් සාදන්න 404 දෝෂය සමඟ, ඔබට එය මත මොනවා දැක්විය හැකිය. පාඩමේ පෙන්වා ඇති පරිදි එය සම්බන්ධ කරන්න. දැන් සබැඳි මත ක්ලික් කරන විට ඔබ එයට ළඟා වන බවට වග බලා ගන්න.