रिएक्ट रूटर में मार्ग

मार्ग (Routes) रिएक्ट रूटर पर बने एप्लिकेशन का सबसे महत्वपूर्ण हिस्सा हैं। आइए पिछले पाठ के कोड का एक टुकड़ा देखें:

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>;
}

वैकल्पिक JSX शैली का उपयोग किया जा सकता था और Route घटक के लिए props के रूप में गुणों को लिखा जा सकता था, तब हमारा कोड का टुकड़ा ऐसा दिखता:

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

और, निश्चित रूप से, आयात में कुछ और पंक्तियाँ जोड़नी पड़तीं:

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

पाठ में दिए गए दोनों शैलियाँ समतुल्य हैं। हम भविष्य में पहले विकल्प पर टिके रहेंगे।

पिछले पाठों के असाइनमेंट में आपके द्वारा बनाए गए एप्लिकेशन को लें। रूटर बनाने के लिए कोड के टुकड़े को फिर से लिखने का प्रयास करें (पुराने कोड को अभी के लिए कमेंट कर दें), पाठ में दिए गए वैकल्पिक JSX सिंटैक्स का उपयोग करके। सुनिश्चित करें कि एप्लिकेशन काम करता है।

पुराने सारे कोड को वापस उसकी जगह रख दें, और नए कोड को हटा दें। सुनिश्चित करें कि एप्लिकेशन काम करता है।