React Router-এ Not Found ত্রুটি পরিচালনা

একটি অ্যাপ্লিকেশন তৈরি করার সময় এর পরবর্তী ব্যবহারের প্রক্রিয়ায় বিভিন্ন ত্রুটি দেখা দেওয়ার দিকেও মনোযোগ দিতে হবে। এই পাঠে আমরা '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 ফাইলটি তৈরি করি।

ErrorPage404 React কম্পোনেন্টের ভিতরে আমরা ত্রুটি ধরতে 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';

এবং Router অবজেক্টে আরও একটি বৈশিষ্ট্য errorElement যোগ করুন - এই এলিমেন্টটি প্রদর্শিত হয়, যখন এই রাউটে একটি ত্রুটি ঘটে। ত্রুটি এলিমেন্টের মান হবে আমাদের ErrorPage404 কম্পোনেন্ট:

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

আপনি আগের পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। মূল পৃষ্ঠায় পাঠে দেখানো হিসাবে কয়েকটি লিঙ্ক নিয়ে গঠিত একটি তালিকা যোগ করুন। লিঙ্কগুলির href মান যেন হয় - /students/1 এবং /students/2, এবং লিঙ্কের টেক্সট যেন হয় - 'Student1' এবং 'Student2' যথাক্রমে। নিশ্চিত করুন যে লিঙ্কগুলিতে ক্লিক করলে আপনার কাছে React Router ডিফল্টভাবে যে ত্রুটি দেখায় সেই স্ক্রিনটি উপস্থিত হয়।

এবং এখন আপনার নিজস্ব একটি পৃথক 404 ত্রুটি পৃষ্ঠা তৈরি করুন, সেখানে আপনি যা চান তা প্রদর্শন করতে পারেন। এটিকে পাঠে দেখানো হিসাবে সংযুক্ত করুন। এবং এখন নিশ্চিত করুন যে লিঙ্কগুলিতে ক্লিক করলে আপনি ঠিক এর উপরেই পৌঁছান।