Route in React Router

Le route (Routes) sono la parte più importante di un'applicazione su React Router. Consideriamo un frammento di codice della lezione precedente:

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

Ebbene, le proprietà dell'oggetto path e element, che abbiamo passato alla funzione durante la creazione del router, sono le proprietà dell'oggetto Route. In realtà, questo oggetto ha molte proprietà, è possibile trovarle nella documentazione ufficiale. In futuro, alcune di esse ci saranno utili:

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

Si poteva utilizzare lo stile JSX alternativo e scrivere le proprietà come props per il componente Route, allora il nostro frammento di codice sarebbe apparso così:

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

E, naturalmente, sarebbe stato necessario aggiungere un paio di righe nell'import:

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

Entrambi gli stili presentati nella lezione sono equivalenti. Noi in seguito adotteremo la prima variante.