Kuongeza Njia Nyingine katika React Router

Tuna njia ya mizizi, inayoongoza kwenye ukurasa wa kwanza, ambapo tuna viungo vya bidhaa. Hebu sasa tuongeze njia nyingine, ili ukiibonyeza moja ya viungo ionekane ukurasa wa bidhaa, na sio skrini ya makosa.

Kwa kuanza, hebu tufungue programu yetu, ambayo tulifanya katika masomo yaliyopita na tuunde katika folda routes faili product.jsx. Tufanye ndani yake kipengele Product:

function Product() {}

export default Product;

Sasa tuunde ndani ya Product kipengele product, chenye sifa name, cost na amount, kwa sasa hizi zitakuwa baadhi ya maadili yaliyowekwa:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Na kwenye ukurasa wa bidhaa tutakuwa tukionyesha, ipasavyo, jina lake, gharama na kiasi:

return (
	<div>
		<h2>Ukurasa wa Bidhaa</h2>
		<p>Jina: {product.name}</p>
		<p>Gharama: {product.cost}</p>
		<p>Kiasi: {product.amount}</p>
	</div>
);

Ni muhimu tuongeze usajili wa kipengele Product kwenye faili main.jsx:

import Product from './routes/product';

Na, mwishowe, tuongeze njia nyingine katika programu yetu, tufanye hivi mara moja baada ya njia ya mizizi. Kama njia tuonyeshe 'products/:productId', na kama kipengele cha kuonyesha tukitumie kipengele Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Na sasa tuanzishe programu, tubonyeze viungo na tufike kwenye ukurasa wa bidhaa (kwa sasa ni sawa kwa viungo vyote), na sio ukurasa wa makosa.

Chukua programu, iliyoundwa na wewe katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, unda kwa namna ile ile faili student.jsx, iwe kwenye ukurasa wa mwanafunzi inaonyesha jina lake, jina la ukoo, mwaka wa kujiunga na maaluma. Ongeza njia mpya kwa ukurasa wa mwanafunzi kwenye faili main.jsx, weka thamani ya path kuwa 'students/:studentId'. Hakikisha, kuwa ukibonyeza viungo unafika sasa kwenye ukurasa wa mwanafunzi.