React Router හි මූල මාර්ගයක් සෑදීම

ප්‍රධාන පිටුවට යොමු කරන මූලික මාර්ගය බොහෝ විට මූල මාර්ගය (root route) ලෙස හැඳින්වේ, අනෙක් මාර්ග එහි ඇතුළත 렌더් කරනු ඇත. එය වෙනම සංරචකයක් ලෙස සිතීම ඉතා පහසුය. එබැවින් අපගේ යෙදුම නැවත ගෙන src ෆෝල්ඩරය තුළ තවත් එකක් සාදා එයට routes යන නම තබමු. දැන් මෙම ෆෝල්ඩරය තුළ root.jsx යන ගොනුව සාදන්න වෙනම React සංරචකයක් වන Root සඳහා. ගොනුවේ කේතය මෙසේ දිස්වනු ඇත:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

දැන් අපි main.jsx ගොනුවේ කේත කොටසට වෙනස්කම් කරමු, මන්ද element හි අගය ලෙස දැන් අපි Root සංරචකය හුවමාරු කරමු, එහි අන්තර්ගතය දැන් වෙනම root.jsx ගොනුවේ ඇත:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

main.jsx හි අපගේ සංරචකය ආයාත කිරීමේ පේළිය අමතක නොකරන්න:

import Root from './routes/root';

පෙර පාඩම් සඳහා වන කාර්යයන්හිදී ඔබ සාදන ලද යෙදුම අරින්න. මූල මාර්ගය සඳහා වෙනම React සංරචකයක් Root වෙනම ගොනුවක root.jsx තුළ සාදන්න, මෙම පාඩමේ විස්තර කර ඇති පරිදි. ඔබගේ main.jsx ගොනුවට වෙනස්කම් කරන්න.