Страница продукта в браузере в 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' в левом меню вела на страницу со списком студентов. Проверьте, что все заработало.

Посмотрите как будет меняться значение в адресной строке браузера, в зависимости от того на какой страничке вы сейчас находитесь.