React Router හි දර්ශක මාර්ගය

මෙම පාඩමෙන්, අපි දැන ගනිමු දර්ශක මාර්ග යනු කුමක්ද යන්න.

පළමුව, අපි එක් දෙයකට අවධානය යොමු කරමු. අපි ප්‍රධාන පිටුවේ සිටින විට, දකුණු පසින් අපට හුදෙක් හිස් තිරයක් දකිනු ලැබේ. මෙය හේතුව යාවත්කාලීන මාර්ග කිසිවක් ලිපිනයට ගැලපෙන්නේ නැති නිසාය /, මෙම අවස්ථාවේ දී කුමක් ප්‍රදර්ශනය කළ යුතුද යන්න අපි කියා නැත. මෙවැනි අවස්ථාවක, හිස් පිටුවක් පෙන්වීම වළක්වා ගැනීම සඳහා, අපට භාවිතා කළ හැකිය දර්ශක මාර්ගය - එවැනි යාවත්කාලීන මාර්ගයක්, එයට මාර්ගයක් නොමැති, සහ එහි අංගය පෙන්වනු ලබන්නේ මාපකයේ Outlet විට, යාවත්කාලීන කිසිවක් ගැලපෙන්නේ නැති විට යාවත්කාලීන කට්ටලයෙන්. එවැනි මාර්ග භාවිතා කරමින්, ඔබට ඕනෑම තොරතුරු, හෝ සංඛ්‍යාලේඛන, හෝ වෙනත් සමාන යමක් තැබිය හැකිය. සාමාන්‍ය ඒවා මෙන්ම, ඔබට ඒවා භාවිතා කළ හැකිය දත්ත පූරණය කිරීම සඳහා.

දැන් අපි ගොනුවක් සාදමු index.jsx ෆෝල්ඩරය තුළ routes, සහ එහි සංරචකය Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Hi, React Router!</p>
      <p>This is an application for my products :)</p>
    </div>
  );
}

දැන් අපි යමු main.jsx සහ අපගේ සංරචකය ආයාත කරමු Index එහි:

main.jsximport Index from './routes/index';

සහ පළමු මූලද්‍රව්‍යය ලෙස අරාවට children අපි වස්තුවක් එකතු කරමු, එහි දේපල index සකසා ඇත true, සහ මූලද්‍රව්‍යය ලෙස ප්‍රදර්ශනය කිරීම සඳහා අපගේ සංරචකය වනු ඇත Index:

main.jsx{ index: true, element: <Index /> },