Aggiunta di un'altra rotta in React Router

Abbiamo una rotta radice che porta alla pagina principale, dove abbiamo link per i prodotti. Ora aggiungiamo un'altra rotta in modo che quando clicchiamo su uno dei link venga visualizzata la pagina del prodotto, e non la schermata di errore.

Per iniziare, apriamo la nostra applicazione, che abbiamo creato nelle lezioni precedenti e creiamo nella cartella routes il file product.jsx. Creiamo al suo interno il componente Product:

function Product() {}

export default Product;

Ora creiamo all'interno di Product un oggetto product, con le proprietà name, cost e amount, per ora saranno alcuni valori fissi:

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

export default Product;

E nella pagina del prodotto visualizzeremo, rispettivamente, il suo nome, costo e quantità:

return (
	<div>
		<h2>Pagina del prodotto</h2>
		<p>Nome: {product.name}</p>
		<p>Costo: {product.cost}</p>
		<p>Quantità: {product.amount}</p>
	</div>
);

Aggiungiamo obbligatoriamente l'import del componente Product nel file main.jsx:

import Product from './routes/product';

E, infine, aggiungiamo un'altra rotta alla nostra applicazione, facciamolo subito dopo la radice. Come percorso indichiamo 'products/:productId', e come elemento da visualizzare abbiamo il componente Product:

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

E ora avviamo l'applicazione, clicchiamo sui link e ci ritroviamo sulla pagina del prodotto (per ora è uguale per tutti i link), e non sulla pagina di errore.

Prendete l'applicazione creata da voi nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, create in modo simile il file student.jsx, fate in modo che sulla pagina dello studente vengano visualizzati il suo nome, cognome, anno di iscrizione e corso di studi. Aggiungete una nuova rotta per la pagina dello studente nel file main.jsx, impostate il valore path su 'students/:studentId'. Assicuratevi che cliccando sui link si arrivi ora sulla pagina dello studente.