Produktside i nettleseren i Redux

I forrige forelesning lagde vi en separat side for produktet. Nå må vi gjøre slik at når vi klikker på en knapp, vil siden vår vises i nettleseren.

La oss først tildele en adresse den skal vises på. La oss åpne filen App.jsx, der vi definerer rutene, og legge til en underrute til i children (ikke glem å importere ProductPage.jsx). La oss spesifisere stien og komponenten som skal vises:

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

La oss nå åpne ProductsList.jsx i mappen products og endre koden for dispProducts litt. Nå har vi en separat side med full informasjon om hvert produkt. Det betyr at i produktlisten vil vi bare vise produktnavnet og en forkortet beskrivelsestekst. Vi vil også legge til en lenke i form av et navigasjonselement Link fra ruterbiblioteket, ved å klikke på denne vil man komme til produktsiden. La oss også legge til klassen product-excerpt på div-en for å skille produktene. Nå vil koden vår for dispProducts se slik ut:

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>
))

La oss importere Link:

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

Og la oss legge til stiler for klassene link-btn og product-excerpt i 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;
}

Til slutt, la oss også gjøre lenken i menyen til venstre som leder til siden med produktlisten funksjonell, slik at vi kan komme til den fra hvor som helst annet sted. For å gjøre dette, la oss åpne root.jsx og erstatte denne kodelinjen:

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

Med følgende:

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

La oss også huske å importere NavLink fra biblioteket for React router:

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

La oss starte applikasjonen vår. Nå kan vi gå til informasjonssiden om et hvilket som helst produkt ved å klikke på vis-knappen. Prøv å legge til et nytt produkt og se informasjonen om det på en separat side ved å klikke på vis-knappen. Også nå, for å gå tilbake til produktlisten er det nok å klikke på 'Products' i menyen til venstre. Når du er på forskjellige sider, se hvordan URL-en i adresselinjen i nettleseren endres.