Lägga till ytterligare en rutt i React Router

Vi har en rotroute som leder till hemsidan, där vi har länkar för produkter. Låt oss nu lägga till ytterligare en rutt så att när vi klickar på en av länkarna visas en produktsida, istället för en felsida.

Låt oss först öppna vår applikation, som vi skapade i de föregående lektionerna och skapa en fil product.jsx i mappen routes. Vi skapar en komponent Product i den:

function Product() {}

export default Product;

Nu skapar vi ett objekt product inuti Product, med egenskaperna name, cost och amount, för nu kommer dessa att vara några fasta värden:

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

export default Product;

Och på produktsidan kommer vi att visa, följaktligen, dess namn, kostnad och antal:

return (
	<div>
		<h2>Produktsida</h2>
		<p>Namn: {product.name}</p>
		<p>Kostnad: {product.cost}</p>
		<p>Antal: {product.amount}</p>
	</div>
);

Glöm inte att lägga till import av komponenten Product i filen main.jsx:

import Product from './routes/product';

Och slutligen lägger vi till ytterligare en rutt i vår applikation, vi gör detta direkt efter rotroutern. Som sökväg anger vi 'products/:productId', och som element att visa använder vi komponenten Product:

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

Och nu startar vi applikationen, klickar på länkarna och hamnar på produktsidan (för nu är den samma för alla länkar), istället för en felsida.

Ta applikationen du skapade i uppgifterna till de föregående lektionerna. Använd lektionens material, skapa på liknande sätt filen student.jsx, låt på studentens sida visas hans/hennes förnamn, efternamn, inskrivningsår och utbildning. Lägg till en ny rutt för studentsidan i filen main.jsx, sätt värdet på path till 'students/:studentId'. Se till att du när du klickar på länkarna kommer till studentsidan.