Shtimi i një rruge tjetër në React Router

Ne kemi një rrugë rrënjësore që çon në faqen kryesore, ku kemi lidhje për produktet. Le të shtojmë tani një rrugë tjetër në mënyrë që gjë klikimit në një nga lidhjet të shfaqet faqja për produktin, dhe jo ekrani me gabim.

Për fillim, le të hapim aplikacionin tonë, që e kemi bërë në mësimet e mëparshme dhe të krijojmë në dosjen routes skedarin product.jsx. Le të bëjmë në të komponentin Product:

function Product() {}

export default Product;

Tani le të krijojmë brenda Product objektin product, me vetitë name, cost dhe amount, për tani këto do të jenë disa vlera të fiksuara:

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

export default Product;

Dhe në faqen e produktit ne do shfaqim, përkatësisht, emrin e tij, çmimin dhe sasinë:

return (
	<div>
		<h2>Faqja e produktit</h2>
		<p>Emri: {product.name}</p>
		<p>Çmimi: {product.cost}</p>
		<p>Sasia: {product.amount}</p>
	</div>
);

Domosdoshmërisht le të shtojmë importin e komponentit Product në skedarin main.jsx:

import Product from './routes/product';

Dhe, në fund, le të shtojmë një rrugë tjetër në aplikacionin tonë, le ta bëjmë këtë menjëherë pas asaj rrënjësore. Si rrugë le të caktojmë 'products/:productId', dhe si element për shfaqje na shërben komponenti Product:

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

Dhe tani le të nisim aplikacionin, të klikojmë në lidhje dhe të gjejmë veten në faqen e produktit (për tani ajo është e njëjtë për të gjitha lidhjet), dhe jo në atë me gabim.

Merrni aplikacionin, të krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, krijoeni në mënyrë të ngjashme skedarin student.jsx, le të në faqen e studentit të shfaqet emri, mbiemri, viti i regjistrimit dhe specialiteti i tij. Shtoni një rrugë të re për faqen e studentit në skedarin main.jsx, vendosni vlerën path në 'students/:studentId'. Sigurohuni që gjatë klikimit në lidhje ju arrini tani në faqen e studentit.