Ruter i React Router

Ruter (Routes) er den vigtigste del af et program med React Router. Lad os se på et stykke kode fra den forrige lektion:

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

Så, egenskaberne for objektet path og element, som vi passede til funktionen ved oprettelse af routeren, er egenskaber for objektet Route. Faktisk, har dette objekt mange egenskaber, de kan findes i den officielle dokumentation. I fremtiden vil nogle af dem være nyttige for os:

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

Man kunne have brugt en alternativ JSX-stil og skrevet egenskaberne som props for Route-komponenten, så ville vores stykke kode se sådan ud:

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

Og, selvfølgelig, ville det være nødvendigt at tilføje et par linjer mere i importen:

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

Begge de i lektionen viste stile er lige værd. I fremtiden vil vi holde os til den første variant.