Rute în React Router

Rutele (Routes) sunt cea mai importantă parte a unei aplicații în React Router. Să considerăm un fragment de cod din lecția anterioară:

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

Deci, proprietățile obiectului path și element, pe care le-am transmis funcției la crearea routerului, sunt proprietățile obiectului Route. De fapt, acest obiect are multe proprietăți, ele pot fi găsite în documentația oficială. În continuare, unele dintre ele ne vor fi utile:

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

Puteam folosi stilul JSX alternativ și să scriem proprietățile ca props pentru componenta Route, atunci fragmentul nostru de cod ar arăta astfel:

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

Și, desigur, ar fi trebuit să adăugăm încă câteva rânduri în import:

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

Ambele stiluri prezentate în lecție sunt echivalente. Noi în continuare vom respecta prima variantă.