Kuongeza Data kwenye React Router

Katika masomo yaliyopita tumeandaa loader na upakiaji wa data kwenye njia maalum kutoka kwa uhifadhi. Hebu sasa tufahamiane kwa mfano wa programu yetu jinsi ya kuongeza bidhaa mpya na kuandika data yake kwenye uhifadhi.

Wacha tufungue faili root.jsx na tuongeze kifungo cha kuongeza bidhaa mpya kabla ya nav, tukikikunja kwenye tagi ya fomu. Pia sasa tutaifunga kifungo na orodha yetu kwenye div nyingine na #menu. Muundo sasa utaonekana hivi:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">ongeza bidhaa</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Haijaorodheshwa</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>hakuna bidhaa hapa ...</i>
			</p>
			)}
		</div>

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

Ikiwa sasa tutaingia kwenye kichupo 'Mtandao' cha kidude cha wasanidi, kisha tubonyeze kifungo chetu, tutaona ombi lililokosekana la hati kwenye seva. Kwa kutumia React Router tutatumia tena uelekezaji wa njia upande wa mteja, tukiondoa ombi kwa seva.

Wacha kwa hili tubadilishe tagi form kuwa komponeniti Form ya React Router. Ongeza kuagiza Form kwa mara ya kwanza:

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

Sasa badilisha tagi form kwenye kipande cha kificho:

<Form method="post">
	<button type="submit">ongeza bidhaa</button>
</Form>

Pakia upya programu yetu na uangalie tena kidude cha wasanidi. Tubonyeze kifungo cha kuongeza bidhaa - sasa hakuna ombi kwa seva (usijali kuhusu hitilafu kwa sasa).

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, sahihisha muundo wa kitendakazi Root, ongeza kifungo cha kuongeza mwanafunzi kwenye tagi form. Hakikisha kuwa wakati wa kubonyeza kifungo kuna ombi kwa seva.

Sasa badilisha tagi form, uweke komponeniti Form. Hakikisha kuwa wakati wa kubonyeza kifungo cha kuongeza mwanafunzi ombi kwa seva halitumwi.