Redux-тегі браузердегі өнім беті

Өткен сабақта біз өнім үшін жеке бетша жасадық. Енді бізге керек, кез келген батырманы басқанда біздің бетшамыз браузерде пайда болуы.

Бастапқыда оған ол көрсетілетін адресті бекітеміз. Біз маршруттарды көрсететін App.jsx файлын ашамыз және children-ке тағы бір балалық маршрут қосамыз (ProductPage.jsx импорттауды ұмытпаңыз). Біз жолды және шығаратын компонентті көрсетеміз:

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

Енді products бумасындағы ProductsList.jsx ашып, 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' сілтемесі студенттер тізімінің бетіне әкелетін етіңіз. Барлығы жұмыс істейтінін тексеріңіз.

Браузердің адрестік жолындағы мәннің қалай өзгеретінін қараңыз, қазір қай бетшада тұрғаныңызға байланысты.