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

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

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

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

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

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

import Index from './routes/index';

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

{ index: true, element: <Index /> },

ඔබ විසින් මීට පෙර පාඩම සඳහා වැඩ කටයුතු වලදී සාදන ලද යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, දර්ශක මාර්ගයක් එක් කරන්න ප්‍රධාන පිටු ලිපිනය සමඟ යම් පෙළක් සමඟ.