React Router හි මාර්ග

මාර්ග (Routes) යනු React Router මත ගොඩනගා ඇති යෙදුමක වැදගත්ම කොටස වේ. පසුගිය පාඩමේ කේත කොටසක් බලමු:

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

ඉතින්, path සහ element යන ගුණාංග, අපි router එකක් සෑදීම සඳහා ශ්රිතයට ලබා දුන්නේ, ඒවා Route වස්තුවේ ගුණාංග වේ. සත්යයෙන්, මෙම වස්තුවට ගුණාංග රාශියක් ඇත, ඒවා නිල ප්‍රලේඛනයේ සොයාගත හැකිය. ඉදිරියට යන විට, ඒවායින් ඇතැම් අපට ප්‍රයෝජනවත් වනු ඇත:

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

ප්‍රත්‍යාවර්තී JSX විලාසය භාවිතා කර Route අංගය සඳහා ප්‍රොප් ලෙස ගුණාංග ලිවිය හැකිය, එවිට අපගේ කේත කොටස මෙලෙස පෙනෙනු ඇත:

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

තවද, අනිවාර්යයෙන්ම ආනයනයට පේළි කිහිපයක් එකතු කිරීමට සිදුවනු ඇත:

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

පාඩමේ දක්වා ඇති විලාස දෙකම සමාන වේ. අපි ඉදිරියට යන විට පළමු විකල්පයට අනුගත වෙමු.