React Router හි මාර්ග

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

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

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

interface 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 අංගය සඳහා ප්‍රොප් ලෙස ගුණාංග ලිවිය හැකිය, එවිට අපගේ කේත කොටස මෙලෙස පෙනෙනු ඇත:

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

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

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

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

පෙර පාඩම් සඳහා ඔබ විසින් නිර්මාණය කරන ලද යෙදුම ගන්න. Router එකක් සෑදීම සඳහා කේත කොටස නැවත ලිවීමට (පැරණි කේතය තවමත් ප්‍රතික්ෂේප කරමින්) උත්සාහ කරන්න, පාඩමේ දක්වා ඇති ප්‍රත්‍යාවර්තී JSX වාක්‍ය රීතිය භාවිතා කරමින්, යෙදුම ක්‍රියාත්මක වන බවට වග බලා ගන්න.

සියලු පැරණි කේතය නැවත එහි ස්ථානයට ගෙන එන්න, නව කේතය ඉවත් කරන්න. යෙදුම ක්‍රියාත්මක වන බවට වග බලා ගන්න.