Njia katika React Router

Njia (Routes) ni sehemu muhimu zaidi ya programu ya React Router. Hebu tuchunguze kipande cha msimbo kutoka somo lilopita:

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

Basi, sifa za kitu path na element, ambazo tulizipita kwenye kitendo cha kuunda njia, ndizo sifa za kitu Route. Kweli, kitu hiki kina sifa nyingi, zinaweza kupatikana kwenye nyaraka rasmi. Baadaye, zitatusaidia baadhi yake:

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

Ingewezekana kutumia mtindo mbadala wa JSX na kuandika sifa kama vipengele vya kipengele cha Route, basi kipande chetu cha msimbo kingeonekana hivi:

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

Na, bila shaka, ingelihitajika kuongeza mistari michache zaidi kwenye usafirishaji:

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

Miundo yote miwili iliyotolewa kwenye somo ni sawa. Sisi baadaye tutashikilia chaguo la kwanza.