React Router-da Marsrutlar

Marsrutlar (Routes) React Router esasinda qurulmus tetbiqin en vacib hissəsidir. Kecən dersdeki kodu bir deye nezerden kecirek:

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

Beləliklə, router yaradan funksiyaya iletmish oldugumuz obyektin path ve element xasseleri, eslinde Route obyektinin xasseleridir. Əslinde, bu obyektin coxlu xasseleri var, onları resmi dokumentasiyada tapa bilersiz. Gelecekde, onlarin bəzileri bizim işimize yarayacaq:

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

Alternativ JSX stilinden istifade ederek xasseleri Route komponenti ucün prop kimi yazmaq olardi, onda kodumuzun o bir parçasi belə görünərdi:

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

Və, əlbəttə, importa daha bir neçə sətir əlavə etmək lazım gələrdi:

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

Derste gosterilen her iki stil beraberdir. Biz gelecekde birinci varianta üstünlük vereceyik.