Toote leht brauseris Reduxis

Eelmisel tunnil tegime eraldi lehe toote jaoks. Nüüd peame sedama tegema, et vajutades mõnule nupule meie leht ilmub brauseris.

Alustuseks kinnitame sellele aadressi, millele see kuvatakse. Avame faili App.jsx, milles me määratleme marsruudid, ja lisame children veel ühe lapse marsruudi (ärge unustage importida ProductPage.jsx). Määrame tee ja komponendi, mida hakkame kuvama:

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

Nüüd avame ProductsList.jsx kaustas products ja muudame veidi koodi dispProducts jaoks. Nüüd on meil eraldi lehekülg täieliku infoga iga toode kohta. See tähendab, et toodete nimekirjas kuvame ainult toote nime ja lühendatud kirjeldusteksti. Samuti lisame lingi navigatsioonielemendina Link marsruutija teekist, millele vajutades saab minna toote lehele. Lisame ka div'ile klassi product-excerpt, et tooteid lahutada. Nüüd on meie kood dispProducts jaoks selline:

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

Impordime Link:

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

Ja lisame stiile klassidele link-btn ja product-excerpt faili 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;
}

Lõpetuseks, teeme ka töötavaks lingi vasakus menüüs, mis viib lehele toodete nimekirjaga, et me saaksime sinna pääseda ükskõik millisest muust kohast. Selleks avame oma root.jsx ja asendame selle koodirea:

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

Järgmisega:

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

Samuti ärme unusta importida NavLink React marsruutija teekist:

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

Käivitame oma rakenduse. Nüüd saame minna info lehele ükskõik millise toode kohta, vajutades vaatamise nupule. Proovige nüüd lisada uus toode ja vaadake selle infot eraldi lehel, vajutades vaatamise nupule. Samuti nüüd, et naasta toodete nimekirja piisab klõpsata 'Products' vasakus menüüs. Olles erinevatel lehtedel, vaadake kuidas muutub URL brauseri aadressireas.