Stran izdelka v brskalniku v Redux

Na prejšnjem srečanju smo naredili ločeno stran za izdelek. Zdaj moramo poskrbeti, da se ob kliku na kakršen koli gumb naša stran prikaže v brskalniku.

Za začetek ji dodelimo naslov, na katerem se bo prikazovala. Odprimo datoteko App.jsx, v kateri določamo poti, in dodajmo v children še eno podrejeno pot (ne pozabite uvoziti ProductPage.jsx). Določimo pot in komponento, ki jo bomo prikazovali:

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

Zdaj odprimo ProductsList.jsx v mapi products in nekoliko spremenimo kodo za dispProducts. Zdaj imamo ločeno stran s popolnimi informacijami o vsakem izdelku. To pomeni, da bomo v seznamu izdelkov prikazovali le ime izdelka in skrajšano besedilo opisa. Prav tako bomo dodali povezavo v obliki navigacijskega elementa Link iz knjižnice za usmerjevalnik, ob kliku na katero se bomo lahko preusmerili na stran izdelka. Dodajmo še div-u razred product-excerpt, da ločimo izdelke. Zdaj bo naša koda za dispProducts takšna:

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

Uvozimo Link:

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

In dodajmo stilov za razreda link-btn in product-excerpt v 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;
}

Za konec, naredimo delujočo tudi povezavo v meniju na levi, ki vodi na stran s seznamom izdelkov, da lahko vstopimo vanj z katerega koli drugega mesta. Za to odprimo naš root.jsx in zamenjajmo to vrstico kode:

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

Z naslednjo:

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

Prav tako ne pozabimo uvoziti NavLink iz knjižnice za React usmerjevalnik:

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

Zaženimo našo aplikacijo. Zdaj lahko greste na stran s podatki o katerem koli izdelku, tako da kliknete na gumb za ogled. Poskusite zdaj dodati nov izdelek in si oglejte informacije o njem na ločeni strani z klikom na gumb za ogled. Prav tako je zdaj za vrnitev k seznamu izdelkov dovolj, da kliknete na 'Products' v meniju na levi. Ko ste na različnih straneh, oglejte si, kako se spreminja URL v naslovni vrstici brskalnika.