Rutter i React Router

Rutter (Routes) är den viktigaste delen av ett React Router-program. Låt oss titta på en bit kod från föregående lektion:

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

Så, egenskaperna path och element, som vi skickade till funktionen när vi skapade routern, är egenskaperna för objektet Route. Egentligen har detta objekt många egenskaper, de kan hittas i den officiella dokumentationen. I framtiden kommer några av dem att vara användbara för oss:

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 kunde ha använt en alternativ JSX-stil och skrivit egenskaperna som props för Route-komponenten, då skulle vår kodbit ha sett ut så här:

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

Och, naturligtvis, skulle man ha behövt lägga till några rader till i importen:

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

Båda stilarna som presenteras i lektionen är likvärdiga. Vi kommer i fortsättningen att hålla oss till det första alternativet.