Kito maršruto pridėjimas į React Router

Turime šakninį maršrutą, vedantį į pagrindinį puslapį, kuriame yra produktų nuorodos. Dabar pridėkime dar vieną maršrutą, kad paspaudus vieną iš nuorodų būtų rodomas produkto puslapis, o ne klaidos ekranas.

Pirmiausia atidarykime mūsų programą, kurią kūrėme ankstesnėse pamokose ir sukurkime aplanke routes failą product.jsx. Jame sukurkime komponentą Product:

function Product() {}

export default Product;

Dabar sukurkime Product viduje objektą product, su savybėmis name, cost ir amount, kol kas tai bus kai kurios fiksuotos reikšmės:

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

export default Product;

Ir produkto puslapyje mes atvaizduosime, atitinkamai, jo pavadinimą, kainą ir kiekį:

return (
	<div>
		<h2>Produkto puslapis</h2>
		<p>Pavadinimas: {product.name}</p>
		<p>Kaina: {product.cost}</p>
		<p>Kiekis: {product.amount}</p>
	</div>
);

Būtinai pridėkime komponento Product importą į failą main.jsx:

import Product from './routes/product';

Ir galiausiai, pridėkime dar vieną maršrutą į mūsų programą, padarykime tai iškart po šakninio. Kaip kelią nurodykime 'products/:productId', o kaip elementą atvaizdavimui pasirinkime komponentą Product:

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

O dabar paleiskime programą, spustelėkime nuorodas ir atsidurkime produkto puslapyje (kol kas jis mums vienodas visoms nuorodoms), o ne klaidos puslapyje.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, panašiai sukurkite failą student.jsx, tegul studento puslapyje būna rodomas jo vardas, pavardė, stojimo metai ir specialybė. Pridėkite naują maršrutą studento puslapiui faile main.jsx, nustatykite path reikšmę į 'students/:studentId'. Įsitikinkite, kad spustelėjus nuorodas dabar patenkate į studento puslapį.