Tilføjelse af endnu en rute i React Router

Vi har en rodrute, der fører til forsiden, hvor vi har links til produkter. Lad os nu tilføje endnu en rute, så vi ved klik på et af linkene får vist en produktside, i stedet for en fejlside.

Til at starte med, lad os åbne vores applikation, som vi lavede i de foregående lektioner og oprette i mappen routes filen product.jsx. Lad os lave en komponent Product i den:

function Product() {}

export default Product;

Lad os nu oprette inde i Product et objekt product, med egenskaberne name, cost og amount, indtil videre vil dette være nogle faste værdier:

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

export default Product;

Og på produktsiden vil vi vise, henholdsvis, dets navn, omkostning og antal:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

Husk at tilføje import af komponenten Product i filen main.jsx:

import Product from './routes/product';

Og til sidst, lad os tilføje endnu en rute til vores applikation, lad os gøre det lige efter rodruten. Som sti angiver vi 'products/:productId', og som element til visning har vi komponenten Product:

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

Og nu starter vi applikationen, klikker på linkene og ender på produktsiden (indtil videre er den den samme for alle link), i stedet for en fejlside.

Tag applikationen, som du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen, opret på samme måde filen student.jsx, lad på studerendesiden vises hans fornavn, efternavn, indskrivningsår og speciale. Tilføj en ny rute for studerendesiden i filen main.jsx, sæt værdien af path til 'students/:studentId'. Sørg for, at du ved klik på linkene nu kommer ind på studerendesiden.