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

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

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

तो, वस्तु के गुण path और element, जो हमने रूटर बनाते समय फ़ंक्शन में पास किए थे, वही वस्तु Route के गुण हैं। वास्तव में, इस वस्तु में कई गुण होते हैं, इन्हें आधिकारिक दस्तावेज़ीकरण में पाया जा सकता है। भविष्य में, इनमें से कुछ हमारे काम आएंगे:

jsxinterface 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 के रूप में गुणों को लिखा जा सकता था, तब हमारा कोड का टुकड़ा ऐसा दिखता:

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

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

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

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