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:

routes/product.jsxfunction 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:

routes/product.jsxfunction 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à:

routes/product.jsxreturn (
  <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:

main.jsximport 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:

main.jsx{
  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.