Rute u React Router-u

Rute (Routes) su najvažniji deo aplikacije na React Router-u. Pogledajmo deo koda iz prethodne lekcije:

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

Dakle, svojstva objekta path i element, koja smo prosledili u funkciju prilikom kreiranja rutera, jesu svojstva objekta Route. Zapravo, ovaj objekat ima mnogo svojstava, ona se mogu naći u zvaničnoj dokumentaciji. U nastavku, neka od njih će nam zatrebati:

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

Moglo se koristiti alternativni JSX stil i napisati svojstva u vidu props-a za komponentu Route, tada bi naš deo koda izgledao ovako:

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

I, naravno, bilo bi potrebno dodati još par linija u import:

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

Oba stila data u lekciji su ravnopravna. Mi ćemo se u nastavku pridržavati prvog varijanta.