Страница продукта в браузере в Redux
На прошлом занятии мы сделали отдельную страничку для продукта. Теперь нам надо сделать так, чтобы при нажатии на какую-нибудь кнопку наша страничка появлялась в браузере.
Для начала прицепим для нее адрес, по которому
она будет отображаться. Откроем файл App.jsx,
в котором мы прописываем маршруты и добавим
в children еще один дочерний маршрут (не
забудьте импортировать ProductPage.jsx).
Укажем путь и компонент, который будем
выводить:
{
path: '/products/:productId',
element: <ProductPage />,
},
Теперь давайте откроем ProductsList.jsx в
папке products и немного изменим код для
dispProducts. Теперь у нас есть отдельная
страничка с полной информацией о каждом
продукте. Значит в списке продуктов мы
будем отображать только название продукта
и сокращенный текст описания. Также мы
добавим ссылочку в виде элемента навигации
Link из библиотеки роутера, при нажатии
на которую можно будет попасть на страничку
продукта. Добавим также диву класс
product-excerpt, чтобы разлепить продукты.
Теперь наш код для dispProducts будет таким:
const 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:
import { Link } from 'react-router-dom'
И добавим стилей для классов link-btn и
product-excerpt в 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 и
заменим эту строку кода:
<a>Products</a>
На следующую:
<NavLink to="/products" end>
Products
</NavLink>
Также не забудем импортировать NavLink
из библиотеки для React роутера:
import { Outlet, NavLink } from 'react-router-dom'
Запустим наше приложение. Теперь мы можем
выходить на страницу информации о любом
продукте, нажав на кнопку просмотра.
Попробуйте теперь добавить новый продукт
и посмотрите информацию о нем на отдельной
странице нажав кнопочку просмотра. Также
теперь, чтобы вернуться к списку продуктов
достаточно кликнуть на 'Products' в меню
слева. Находясь на разных страничках,
посмотрите как меняется URL в адресной
строке браузера.
Откройте ваше приложение со студентами.
В файле App.jsx создайте еще один
дочерний маршрут для странички студента.
В файле StudentsList.jsx внесите в код
изменения для dispStudents, как показано
в уроке.
Сделайте так, чтобы ссылка 'Students' в
левом меню вела на страницу со списком
студентов. Проверьте, что все заработало.
Посмотрите как будет меняться значение в адресной строке браузера, в зависимости от того на какой страничке вы сейчас находитесь.