Старонка прадукту ў браўзэры ў 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' у левым меню вяла на старонку са спісам студэнтаў. Праверце, што ўсё запрацавала.

Паглядзіце як будзе мяняцца значэнне ў адрасным радку браўзэра, у залежнасці ад таго на якой старонцы вы зараз знаходзіцеся.