Teekonna lisamine React Routeris

Meil on juurteekond, mis viib avalehele, kus meil on lingid toodete jaoks. Lisame nüüd veel ühe teekonna, nii et klikkides ühel lingil kuvatakse tooteleht, mitte veakuva.

Alustuseks avame oma rakenduse, mida me tegime eelmistel tundidel ja loome kaustas routes faili product.jsx. Teeme selles komponendi Product:

function Product() {}

export default Product;

Nüüd loome Product sees objekti product, omadustega name, cost ja amount, praegu on need mõned fikseeritud väärtused:

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

export default Product;

Ja tootelehel kuvame vastavalt selle nime, maksumuse ja koguse:

return (
	<div>
		<h2>Toote leht</h2>
		<p>Nimi: {product.name}</p>
		<p>Maksumus: {product.cost}</p>
		<p>Kogus: {product.amount}</p>
	</div>
);

Lisame kindlasti komponendi Product importimise faili main.jsx:

import Product from './routes/product';

Ja lõpuks lisame oma rakendusse veel ühe teekonna, teeme selle kohe pärast juurteekonda. Teena määrame 'products/:productId', ja kuvatava elemendina on meil komponent Product:

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

Nüüd käivitame rakenduse, klikkime linkidel ja jõuame tootelehele (praegu on see meil kõikide linkide jaoks sama), mitte vealehele.

Võtke rakendus, mille te lõite eelmiste tundide ülesannetes. Kasutades tunni materjale, looge sarnaselt fail student.jsx, olgu üliõpilase lehel kuvatud tema eesnimi, perekonnanimi, astumisaasta ja eriala. Lisage uus teekond üliõpilase lehele faili main.jsx, määrake väärtus path 'students/:studentId'. Veenduge, et linkidele klikkides jõuate nüüd üliõpilase lehele.