Dodajanje dodatne poti v React Router

Imamo korensko pot, ki vodi na domačo stran, kjer imamo povezave za produkte. Dodajmo zdaj še eno pot, da bo ob kliku na eno od povezav prikazana stran za produkt, namesto zaslona z napako.

Za začetek odprimo našo aplikacijo, ki smo jo izdelali v prejšnjih lekcijah in ustvarimo v mapi routes datoteko product.jsx. Naredimo v njej komponento Product:

function Product() {}

export default Product;

Zdaj ustvarimo znotraj Product objekt product, z lastnostmi name, cost in amount, za zdaj bodo to nekatere fiksne vrednosti:

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

export default Product;

In na strani produkta bomo prikazali, ustrezno, njegovo ime, ceno in količino:

return (
	<div>
		<h2>Stran produkta</h2>
		<p>Ime: {product.name}</p>
		<p>Cena: {product.cost}</p>
		<p>Količina: {product.amount}</p>
	</div>
);

Obvezno dodajmo uvoz komponente Product v datoteko main.jsx:

import Product from './routes/product';

In, končno, dodajmo še eno pot v našo aplikacijo, naredimo to takoj za korensko. Kot pot navedimo 'products/:productId', in kot element za prikaz imamo komponento Product:

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

In zdaj zaženemo aplikacijo, kliknemo na povezave in se znajdemo na strani produkta (za zdaj je enaka za vse povezave), namesto z napako.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. S pomočjo gradiva lekcije, ustvarite na podoben način datoteko student.jsx, naj se na strani študenta prikaže njegovo ime, priimek, letnik vpisa in smer. Dodajte novo pot za stran študenta v datoteki main.jsx, nastavite vrednost path na 'students/:studentId'. Prepričajte se, da ob kliku na povezave zdaj pridete na stran študenta.