React Router හි සේවාදායක පැත්තේ මාර්ගගත කිරීම
මෙම පාඩමේදී අපි තනි පිටු (SPA) යෙදුම්වල වැදගත් අංගයක් වන සේවාදායක පැත්තේ මාර්ගගත කිරීම සලකා බලමු. මෙවැනි මාර්ගගත කිරීමක් අපට ඉඩදෙයි අතිරික්සුවේ URL යාවත්කාලීන කිරීමට සේවාදායකයෙන් ලේඛනයක් අතිරේක ඉල්ලීම් නොමැතිව.
පෙර පාඩමේදී අපි නිර්මාණය කළ යෙදුම
ආරම්භ කරන්න. සංවර්ධක පැනලය විවෘත කර
එහි ටැබ් එක 'ජාලය' (Chrome සඳහා Network).
අපගේ සබැඳි වලට සෑම ක්ලික් කිරීමකින් පසුව අපි
දකිනවා සෑම අවස්ථාවකම document සඳහා ඉල්ලීම. එනම්
අපි සෑම අවස්ථාවකම සේවාදායකයෙන් අපට
document පූරණය කර ගැනීමට ඉල්ලා සිටිමු.
දැන් අපි React Router හි ප්රතිලාභ භාවිතා කරමු,
එවැනි ඉල්ලීම් ඉවත් කිරීමට. මේ සඳහා අපි විවෘත කරමු root.jsx
අපගේ යෙදුමේ සහ ප්රතිස්ථාපනය කරමු ටැග් a
�ලක්ෂණය කිරීම සංරචකයෙන් Link. මුලින්ම
අපි එහි ආයාතය එකතු කරමු:
import { Outlet, Link } from 'react-router-dom';
දැන් අපි ටැග් ප්රතිස්ථාපනය කරමු a ගුණාංගය සමග
href. කේත කොටස වෙනුවට:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
දැන් අපට පහත කේතය ඇත:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
නැවත වරක් අපි ටැබ් එක විවෘත කරමු 'ජාලය' මත
සංවර්ධක පැනලය, ලිපින තීරුවේ
මූල මාර්ගය සකසා අලුත් කරන්න
පිටුව. දැන් අපි සබැඳි මත ක්ලික් කරමු
සහ අපි දකිමු document අපගේ ඉල්ලා සිටියේ
එක් වරක් පමණක් ආරම්භක පූරණය වීමේදී
සහ පසුව ක්ලික් කිරීම් වලදී සේවාදායකයට ඉල්ලීම
දැන් නොමැත.
පෙර පාඩම් සඳහා කාර්යයන්හිදී ඔබ විසින් නිර්මාණය කරන ලද යෙදුම ගන්න. පාඩමේ ද්රව්ය භාවිතා කරමින්, එහි ක්රියාත්මක කරන්න සේවාදායක පැත්තේ මාර්ගගත කිරීම, ඔබගේ සබැඳි නැවත සකස් කරමින්, පාඩමේ විස්තර කර ඇති පරිදි.
