Stránka produktu v prehliadači v Reduxe

Na minulej hodine sme vytvorili samostatnú stránku pre produkt. Teraz musíme zabezpečiť, aby sa po kliknutí na nejaké tlačidlo naša stránka zobrazila v prehliadači.

Na začiatok priradíme jej adresu, na ktorej sa bude zobrazovať. Otvoríme súbor App.jsx, v ktorom definujeme trasy, a pridáme do children ešte jednu podriadenú trasu (nezabudnite importovať ProductPage.jsx). Určíme cestu a komponent, ktorý budeme zobrazovať:

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

Teraz otvorme ProductsList.jsx v priečinku products a trochu upravme kód pre dispProducts. Teraz máme samostatnú stránku s úplnými informáciami o každom produkte. To znamená, že v zozname produktov budeme zobrazovať iba názov produktu a skrátený text popisu. Tiež pridáme odkaz v podobe navigačného prvku Link z knižnice routera, po kliknutí na ktorý sa bude možné dostať na stránku produktu. Pridajme tiež divu triedu product-excerpt, aby sme oddelili produkty. Teraz bude náš kód pre dispProducts vyzerať takto:

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

Importujeme Link:

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

A pridajme štýly pre triedy link-btn a product-excerpt do 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;
}

Na záver, urobme tiež funkčný odkaz v ľavom menu, vedúci na stránku so zoznamom produktov, aby sme sa do neho vedeli dostať z akéhokoľvek iného miesta. Preto otvorme náš root.jsx a nahraďme tento riadok kódu:

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

Nasledujúcim:

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

Tiež nezabudnime importovať NavLink z knižnice pre React router:

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

Spustíme našu aplikáciu. Teraz môžeme prejsť na stránku s informáciami o akomkoľvek produkte kliknutím na tlačidlo zobrazenia. Skúste teraz pridať nový produkt a pozrite si informácie o ňom na samostatnej stránke kliknutím na tlačidlo zobrazenia. Tiež teraz, aby ste sa vrátili k zoznamu produktov, stačí kliknúť na 'Products' v menu vľavo. Keď ste na rôznych stránkach, pozrite si, ako sa mení URL v adresnom riadku prehliadača.