Toevoegen van nog een route in React Router

We hebben een rootroute die naar de hoofdpagina leidt, waar we links voor producten hebben. Laten we nu nog een route toevoegen, zodat er bij het klikken op een van de links een pagina voor het product wordt weergegeven, en niet een foutscherm.

Laten we eerst onze applicatie openen, die we in de vorige lessen hebben gemaakt, en in de map routes een bestand product.jsx aanmaken. Laten we hierin de component Product maken:

function Product() {}

export default Product;

Laten we nu binnenin Product een object product aanmaken, met de eigenschappen name, cost en amount, voorlopig zullen dit enkele vaste waarden zijn:

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

export default Product;

En op de productpagina zullen we respectievelijk de naam, de kosten en de hoeveelheid weergeven:

return (
	<div>
		<h2>Productpagina</h2>
		<p>Naam: {product.name}</p>
		<p>Kosten: {product.cost}</p>
		<p>Hoeveelheid: {product.amount}</p>
	</div>
);

Laten we zeker de import van de component Product toevoegen in het bestand main.jsx:

import Product from './routes/product';

En, tenslotte, voegen we nog een route toe in onze applicatie, laten we dit direct na de rootroute doen. Als pad geven we 'products/:productId' op, en als element voor weergave gebruiken we de component Product:

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

En nu starten we de applicatie, klikken we op de links en belanden we op de productpagina (voor nu is deze voor alle links hetzelfde), en niet op een foutpagina.

Neem de applicatie die je in de opdrachten van de vorige lessen hebt gemaakt. Gebruikmakend van de lesmaterialen, maak op een vergelijkbare manier het bestand student.jsx aan, laat op de studentenpagina de naam, achternaam, inschrijvingsjaar en studierichting worden weergegeven. Voeg een nieuwe route toe voor de studentenpagina in het bestand main.jsx, stel de waarde van path in op 'students/:studentId'. Zorg ervoor dat je bij het klikken op de links nu op de studentenpagina terechtkomt.