Legge til en rute til i React Router

Vi har en rot-rute som leder til hovedsiden, hvor vi har linker for produkter. La oss nå legge til en rute til slik at når vi klikker på en av linkene vil vi få vist en side for produktet, og ikke en feilmelding.

La oss først åpne applikasjonen vår, som vi lagde i de forrige leksjonene og opprette i mappen routes filen product.jsx. La oss lage en komponent Product i den:

function Product() {}

export default Product;

La oss nå opprette inni Product et objekt product, med egenskapene name, cost og amount, foreløpig vil dette være noen faste verdier:

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

export default Product;

Og på produktsiden vil vi vise, tilsvarende, dets navn, pris og antall:

return (
	<div>
		<h2>Produktside</h2>
		<p>Navn: {product.name}</p>
		<p>Pris: {product.cost}</p>
		<p>Antall: {product.amount}</p>
	</div>
);

Husk å legge til import av komponenten Product i filen main.jsx:

import Product from './routes/product';

Og til slutt, la oss legge til en rute til i applikasjonen vår, la oss gjøre dette rett etter rot-ruten. Som sti bruker vi 'products/:productId', og som element for visning har vi komponenten Product:

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

Og nå starter vi applikasjonen, klikker på linkene og havner på produktsiden (foreløpig er den den samme for alle linker), og ikke på en feilside.

Ta applikasjonen du opprettet i oppgavene til de forrige leksjonene. Bruk materialet fra leksjonen, opprett på samme måte filen student.jsx, la det på studentsiden vises hans fornavn, etternavn, opptaksår og spesialisering. Legg til en ny rute for studentsiden i filen main.jsx, sett verdien path til 'students/:studentId'. Forsikre deg om at når du klikker på linkene havner du nå på studentsiden.