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

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

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';