Marsruudid React Routeris

Marsruudid (Routes) on React Routeri rakenduse kõige olulisem osa. Vaatleme eelmisest õppetükist väikest koodijuppi:

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

Nii et omadused path ja element, mida me edastasime funktsioonile ruuteri loomisel, ongi objekti Route omadused. Tegelikult sellel objektil on palju omadusi, neid leiate ametlikust dokumentatsioonist. Tulevikus on meil vaja mõnda neist:

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

Võiks kasutada alternatiivset JSX stiili ja kirjutada omadused propina komponendile Route, siis meie koodijupp näeks välja selline:

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

Ja loomulikult oleks vaja lisada veel paar rida importi:

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

Mõlemad õppetükis toodud stiilid on võrdväärsed. Me edaspidi jääme esimese variandi juurde.