React Router හි දත්ත එකතු කිරීම

පෙර පාඩම් වලදී අපි loader එක සකස් කර නිශ්චිත මාර්ගයකින් දත්ත store එකෙන් ලබා ගැනීම සකස් කළෙමු. දැන් අපි අපගේ යෙදුම භාවිතා කර නව නිෂ්පාදනයක් එකතු කර එහි දත්ත store එකට ලියන ආකාරය උදාහරණයක් ලෙස හඳුනා ගනිමු.

root.jsx ගොනුව විවෘත කර nav ට පෙර නව නිෂ්පාදනයක් එකතු කිරීම සඳහා බොත්තම එකතු කරමු, එය form tag එකකින් ආවරණය කරමින්. එමෙන්ම දැන් බොත්තම සහ අපගේ ලැයිස්තුව තවත් div එකකින් ආවරණය කරමු #menu සමඟ. දැන් layout එක පෙනෙන්නේ මෙලෙසයි:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">නිෂ්පාදනය එකතු කරන්න</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>නමක් නැත</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>මෙහි නිෂ්පාදන නැත ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

අපි දැන් developer tools panel එකේ 'Network' ටැබ් එක විවෘත කර, පසුව අපගේ බොත්තම ක්ලික් කලහොත්, සේවාදායකයට වැරදි ඉල්ලීමක් දකින්නෙමු. React Router භාවිතා කර අපි නැවතත් සේවාලාභියා පැත්තේ යොමු කිරීම භාවිතා කරමු, සේවාදායකයට ඉල්ලීම බැහැර කරමින්.

මේ සඳහා අපි form tag එක React Router වල Form component එකට වෙනස් කරමු. පළමුව Form import කිරීම එකතු කරමු:

import { Form } from 'react-router-dom';

දැන් කේත කොටසෙහි form tags ප්රතිස්ථාපනය කරමු:

<Form method="post">
	<button type="submit">නිෂ්පාදනය එකතු කරන්න</button>
</Form>

අපගේ යෙදුම නැවත බාගන්න සහ developer tools panel එක නැවත බලන්න. නිෂ්පාදනය එකතු කිරීමේ බොත්තම ක්ලික් කරන්න - දැන් සේවාදායකයට ඉල්ලීමක් නොමැත (දෝෂය කෙරෙහි අවධානය නොදරන්න).

පෙර පාඩම් සඳහා වැඩපත් වලදී ඔබ විසින් නිර්මාණය කරන ලද යෙදුම ගන්න. පාඩමේ ද්රව්ය භාවිතා කරමින්, Root ශ්රිතයේ markup එක නිවැරදි කරන්න, tag එකෙහි ශිෂ්යයෙකු එකතු කිරීම සඳහා බොත්තම form එකතු කරන්න. බොත්තම ක්ලික් කළ විට සේවාදායකයට ඉල්ලීමක් සිදු වන බවට වග බලා ගන්න.

දැන් tag එක ප්රතිස්ථාපනය කරන්න, component එකට. බොත්තම ක්ලික් කළ විට ශිෂ්යයෙකු එකතු කිරීම සේවාදායකයට ඉල්ලීමක් යවා නොමැති බවට වග බලා ගන්න.