Страна производа у претраживачу у Redux-у

На претходном часу смо направили засебну страницу за производ. Сада морамо да урадимо да се, при клику на неко дугме, наша страница појави у претраживачу.

За почетак, прикачимо јој адресу по којој ће се приказивати. Отворимо фајл App.jsx, у којем дефинишемо руте, и додајмо у children још једну дете руту (не заборавите да увезете ProductPage.jsx). Наведимо пут и компонент који ћемо приказивати:

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

Сада отворимо ProductsList.jsx у фасцикли products и мало изменимо код за dispProducts. Сада имамо засебну страницу са пуним информацијама о сваком производу. Дакле, у листи производа приказиваћемо само назив производа и скраћени текст описа. Такође ћемо додати линк у виду навигационог елемента Link из библиотеке рутера, при клику на који ћемо моћи да дођемо на страницу производа. Додајмо и div-у класу 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 у адресној линији претраживача.