Rrugët në React Router

Rrugët (Routes) janë pjesa më e rëndësishme e një aplikacioni në React Router. Le të shqyrtojmë një copëzim kodi nga mësimi i kaluar:

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

Pra, vetitë e objektit path dhe element, që i kemi kaluar në funksion gjatë krijimit të ruterit, janë vetitë e objektit Route. Në fakt, ky objekt ka shumë veti, ato mund të gjenden në dokumentacionin zyrtar. Në të ardhmen, disa prej tyre do të jenë të dobishme për ne:

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

Mund të ishte përdorur stili alternativ JSX dhe të shkruheshin vetitë në formën e propseve për komponentin Route, atëherë copëzimi ynë i kodit do të dukej kështu:

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

Dhe, sigurisht, do të duhej shtuar edhe disa rreshta të tjerë në import:

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

Të dy stilet e paraqitura në mësim janë ekuivalente. Ne në të ardhmen do të përmbahemi te varianti i parë.