Старонка прадукту ў браўзэры ў Redux

На мінулым заняткі мы зрабілі асобную старонку для прадукту. Цяпер нам трэба зрабіць так, каб пры націску на якую-небудзь кнопку наша старонка з'яўлялася ў браўзэры.

Для пачатку прымацуем для яе адрас, па якому яна будзе адлюстроўвацца. Адкрыем файл App.jsx, у якім мы прапісваем маршруты, і дадамо ў children яшчэ адзін даччыны маршрут (не забудзьце імпартаваць ProductPage.jsx). Укажам шлях і кампанент, які будзем выводзіць:

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

Цяпер давайте адкрыем ProductsList.jsx у папцы products і трохі зменім код для dispProducts. Цяпер у нас ёсць асобная старонка з поўнай інфармацыяй аб кожным прадукце. Значыць у спісе прадуктаў мы будзем адлюстроўваць толькі назву прадукту і скарочаны тэкст апісання. Таксама мы дадамо спасылачку ў выглядзе элемента навігацыі Link з бібліятэкі роўтара, пры націску на якую можна будзе трапіць на старонку прадукту. Дадамо таксама дыву клас product-excerpt, каб разляпіць прадукты. Цяпер наш код для dispProducts будзе такім:

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

Імпартуем Link:

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

І дадамо стыляў для класаў link-btn і product-excerpt у 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;
}

Наастатняе, давайце зробім таксама працоўнай спасылку ў меню злева, якая вядзе на старонку са спісам прадуктаў, каб мы змаглі трапіць у яго з любога іншага месца. Для гэтага адкрыем наш root.jsx і заменім гэты радок кода:

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

На наступную:

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

Таксама не забудзем імпартаваць NavLink з бібліятэкі для React роўтара:

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

Запусцім наша дадатак. Цяпер мы можам выходзіць на старонку інфармацыі аб любым прадукце, націснуўшы на кнопку прагляду. Паспрабуйце цяпер дадаць новы прадукт і паглядзіце інфармацыю аб ім на асобнай старонцы націснуўшы кнопачку прагляду. Таксама цяпер, каб вярнуцца да спісу прадуктаў дастаткова клікнуць на 'Products' у меню злева. Знаходзячыся на розных старонках, паглядзіце як мяняецца URL у адрасным радку браўзэра.