Երթուղիներ React Router-ում

Երթուղիները (Routes) React Router-ով հավելվածի ամենակարևոր մասն են։ Դիտարկենք նախորդ դասի կոդի մի հատված․

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 ոճ և գրել հատկությունները որպես props Route կոմպոնենտի համար, ապա մեր կոդի հատվածը կունենար հետևյալ տեսքը․

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

Եվ, իհարկե, անհրաժեշտ կլիներ ավելացնել ևս մի քանի տող իմպորտում․

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

Դասում բերված երկու ոճերը հավասարազոր են։ Մենք հետագայում կպահպանենք առաջին տարբերակը։