Страница на продукт в браузъра в Redux

В предишния урок направихме отделна страница за продукт. Сега трябва да направим така, че при натискане на някой бутон нашата страница да се появява в браузъра.

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

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

Сега нека отворим ProductsList.jsx в папката products и леко променим кода за dispProducts. Сега имаме отделна страница с пълна информация за всеки продукт. Значи в списъка с продукти ние ще показваме само името на продукта и съкратен текст на описанието. Също така ние ще добавим връзка под формата на навигационен елемент Link от библиотеката на рутера, при натискане на която ще можем да отидем на страницата на продукта. Ще добавим също и div с клас 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' в лявото меню да води към страницата със списък на студентите. Проверете, че всичко работи.

Погледнете как ще се променя стойността в адресната лента на браузъра, в зависимост от това на коя страница се намирате в момента.