Maršruti React Router

Maršruti (Routes) ir svarīgākā daļa React Router lietotnē. Apskatīsim koda fragmentu no iepriekšējās nodarbības:

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

Tātad, objekta īpašības path un element, kuras mēs nododām funkcijā, veidojot maršrutētāju, ir objekta Route īpašības. Patiesībā, šim objektam ir daudz īpašību, tās var atrast oficiālajā dokumentācijā. Turpmāk, dažas no tām mums noderēs:

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

Varēja izmantot alternatīvu JSX stilu un rakstīt īpašības kā props komponentam Route, tad mūsu koda fragments izskatītos šādi:

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

Un, protams, vajadzētu pievienot vēl pāris rindiņas importam:

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

Abi nodarbībā dotie stili ir līdzvērtīgi. Mēs turpmāk pieturēsimies pie pirmā varianta.