React Router-এ রাউট

রাউট (Routes) হল React Router-এ তৈরী অ্যাপ্লিকেশনের সবচেয়ে গুরুত্বপূর্ণ অংশ। আগের পাঠ থেকে কোডের একটি অংশ দেখা যাক:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

তো, path এবং element প্রপার্টিগুলো, যেগুলো আমরা রাউটার তৈরির সময় ফাংশনে পাস করেছি, সেগুলোই হল Route অবজেক্টের প্রপার্টি। আসলে, এই অবজেক্টের অনেকগুলো প্রপার্টি রয়েছে, সেগুলো অফিসিয়াল ডকুমেন্টেশন-এ খুঁজে পাওয়া যাবে। ভবিষ্যতে, এর মধ্যে কিছু প্রপার্টি আমাদের কাজে লাগবে:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

জেএসএক্স স্টাইলের বিকল্প ব্যবহার করা যেত এবং Route কম্পোনেন্টের জন্য প্রপ্স আকারে প্রপার্টিগুলো লিখতে পারতেন, তাহলে আমাদের কোডের অংশটি এভাবে দেখাত:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

এবং, অবশ্যই, ইম্পোর্টে আরও কয়েকটি লাইন যোগ করতে হত:

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

পাঠে উল্লিখিত উভয় স্টাইলই সমতুল্য। ভবিষ্যতে, আমরা প্রথম বিকল্পটি মেনে চলব।

আপনি আগের পাঠগুলোর অ্যাসাইনমেন্টে তৈরী করা অ্যাপ্লিকেশনটি নিন। রাউটার তৈরির কোডের অংশটি পুনরায় লিখার চেষ্টা করুন (পুরানোটি আপাতত কমেন্ট আউট করুন), পাঠে উল্লিখিত বিকল্প জেএসএক্স সিনট্যাক্স ব্যবহার করে। নিশ্চিত করুন, যে অ্যাপ্লিকেশনটি কাজ করছে।

পুরানো কোডটি আবার তার জায়গায় রাখুন, এবং নতুনটি সরিয়ে দিন। নিশ্চিত করুন, যে অ্যাপ্লিকেশনটি কাজ করছে।