Pagina del prodotto nel browser con Redux

Nella scorsa lezione abbiamo creato una pagina separata per il prodotto. Ora dobbiamo fare in modo che quando si clicca su un pulsante, la nostra pagina appare nel browser.

Per cominciare, assegniamole un indirizzo a cui verrà visualizzata. Apriamo il file App.jsx, in cui definiamo le route, e aggiungiamo a children un'altra route figlia (non dimenticate di importare ProductPage.jsx). Specifichiamo il percorso e il componente che vogliamo visualizzare:

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

Ora apriamo ProductsList.jsx nella cartella products e modifichiamo leggermente il codice per dispProducts. Ora abbiamo una pagina separata con informazioni complete su ogni prodotto. Ciò significa che nell'elenco dei prodotti visualizzeremo solo il nome del prodotto e un testo descrittivo abbreviato. Aggiungeremo anche un link sotto forma di elemento di navigazione Link dalla libreria del router, al click del quale si potrà accedere alla pagina del prodotto. Aggiungiamo anche una div con classe product-excerpt, per separare visivamente i prodotti. Ora il nostro codice per dispProducts sarà così:

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

Importiamo Link:

products/ProductsList.jsximport { Link } from 'react-router-dom'

E aggiungiamo stili per le classi link-btn e product-excerpt in index.css:

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

Infine, rendiamo funzionante anche il link nel menu a sinistra, che porta alla pagina con l'elenco dei prodotti, in modo da poter accedervi da qualsiasi altro punto. Per fare questo, apriamo il nostro root.jsx e sostituiamo questa riga di codice:

app/root.jsx<a>Products</a>

Con la seguente:

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

Non dimentichiamo di importare NavLink dalla libreria per React router:

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

Avviamo la nostra applicazione. Ora possiamo accedere alla pagina di informazioni di qualsiasi prodotto, cliccando sul pulsante di visualizzazione. Provate ora ad aggiungere un nuovo prodotto e guardate le sue informazioni nella pagina separata cliccando il pulsante di visualizzazione. Inoltre, ora, per tornare all'elenco dei prodotti basta cliccare su 'Products' nel menu a sinistra. Mentre navigate su pagine diverse, osservate come cambia l'URL nella barra degli indirizzi del browser.