Routen in React Router

Routen (Routes) sind der wichtigste Teil einer React Router Anwendung. Betrachten wir ein Code-Stück aus der vorherigen Lektion:

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

Nun, die Eigenschaften path und element des Objekts, die wir der Funktion bei der Erstellung des Routers übergeben haben, sind die Eigenschaften des Route-Objekts. Tatsächlich hat dieses Objekt viele Eigenschaften, die in der offiziellen Dokumentation gefunden werden können. In Zukunft werden einige davon für uns nützlich sein:

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 hätte den alternativen JSX-Stil verwenden und die Eigenschaften als Props für die Route-Komponente schreiben können, dann hätte unser Code-Stück so ausgesehen:

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

Und natürlich müssten ein paar weitere Zeilen zum Import hinzugefügt werden:

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

Beide in der Lektion gezeigten Stile sind gleichwertig. Wir werden uns in Zukunft an die erste Variante halten.