Страница продукта в браузере в 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 в адресной строке браузера.