Strona produktu w przeglądarce w Redux

Na poprzednich zajęciach zrobiliśmy osobną stronę dla produktu. Teraz musimy sprawić, aby po naciśnięciu jakiegoś przycisku nasza strona pojawiła się w przeglądarce.

Na początek przypiszmy jej adres, pod którym będzie wyświetlana. Otwórzmy plik App.jsx, w którym definiujemy trasy, i dodajmy w children jeszcze jedną trasę potomną (nie zapomnij zaimportować ProductPage.jsx). Wskażmy ścieżkę i komponent, który będziemy wyświetlać:

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

Teraz otwórzmy ProductsList.jsx w folderze products i nieco zmieńmy kod dla dispProducts. Teraz mamy osobną stronę z pełną informacją o każdym produkcie. Oznacza to, że w liście produktów będziemy wyświetlać tylko nazwę produktu i skrócony tekst opisu. Dodamy również link w postaci elementu nawigacji Link z biblioteki routera, po naciśnięciu którego można będzie przejść na stronę produktu. Dodajmy również divowi klasę product-excerpt, aby oddzielić produkty. Teraz nasz kod dla dispProducts będzie taki:

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

Zaimportujmy Link:

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

I dodajmy stylów dla klas link-btn i product-excerpt w 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 koniec, zróbmy również działającym link w menu po lewej stronie, prowadzący na stronę z listą produktów, abyśmy mogli się do niego dostać z dowolnego innego miejsca. Aby to zrobić, otwórzmy nasz root.jsx i zamieńmy ten wiersz kodu:

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

Na następujący:

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

Nie zapomnijmy też zaimportować NavLink z biblioteki dla React routera:

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

Uruchommy naszą aplikację. Teraz możemy przejść na stronę informacji o dowolnym produkcie, naciskając przycisk podglądu. Spróbuj teraz dodać nowy produkt i zobacz informacje o nim na osobnej stronie naciskając przycisk podglądu. Również teraz, aby wrócić do listy produktów wystarczy kliknąć na 'Products' w menu po lewej stronie. Znajdując się na różnych stronach, popatrz jak zmienia się URL w pasku adresu przeglądarki.