Redux-daky önüm sahypasy brauzerde

Öňki sapakda biz önüm üçin aýratyn sahypa ýasadyk. Indi biz muny etmeli, ýöne bir düwmä basanyňyzda biziň sahypamyz brauzerde peýda bolýar.

Başlangyç üçin onuň görkeziljek adresini birikdiräli. Gönükmeleri görkezýän App.jsx faýlyny açalyň we children-a ýene bir çaga gönükdiriji goşalyň (ProductPage.jsx import etmegi ýatdan çykarmaň). Ýol we görkeziljek komponenti görkeziň:

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

Indi products papkasyndaky ProductsList.jsx açalyň we dispProducts üçin kody birneme üýtgedeliň. Indi her bir önüm barada doly maglumatly aýratyn sahypamyz bar. Demek, önümler sanawynda biz diňe önümiň adyny we gysgaldylan düşündiriş teksti görkezeris. Şeýle hem biz nawigasiýa element şeklinde baglanyşyk goşarys Link marşrutyzer kitaphanasyndan, basylanda önüm sahypasyna ýetip boljak. Şeýle hem diva klas product-excerpt goşalyň, önümleri biri-birinden aýyrmak üçin. Indi dispProducts üçin biziň kodymyz şeýle bolar:

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 edeliň:

import { Link } from 'react-router-dom'

We index.css-da link-btn we product-excerpt klaslary üçin stili goşalyň:

.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;
}

Soňky bolup, geliň işleýän baglanyşyk edeliň soldaky menýuda, önümleriň sanawy sahypasyna eltýän, beýleki ýerlerden hem onuň içine girip bilmek üçin. Bunuň üçin root.jsx açalyň we bu kod setirini çalyşdyryň:

<a>Products</a>

Indiki bilen:

<NavLink to="/products" end>
	Products
</NavLink>

Şeýle hem NavLink import etmegi ýatdan çykarmaň React marşrutyzer kitaphanasyndan:

import { Outlet, NavLink } from 'react-router-dom'

Biziň ammaryňyzy işledeliň. Indi biz görnüş düwmesine basyp, islendik önüm barada maglumata çykyp bileris. Indi täze önüm goşup synaň we onuň baradaky maglumaty görüň aýratyn sahypada görnüş düwmesine basyp. Şeýle hem indi, önümleriň sanawyna gaýtmak üçin soldaky menýudaky 'Products'-a basmak ýeterlik. Üýtgeşik sahypalarda bolup, brauzeriň adres setirindäki URL-iň nädip üýtşändigine serediň.

Talyplyar bilen ammaryňyzy açyň. App.jsx faýlynda talyp sahypasy üçin ýene bir çaga gönükdiriji dörediň.

StudentsList.jsx faýlynda koda dispStudents üçin üýtgeşmeler giriziň, sapakda görkezilşi ýaly.

Soldaky menýudaky 'Students' baglanyşyk talyplyaryň sanawy sahypasyna eltmegini ediň. Hemmesiň işleýändigini barlaň.

Häzirki wagtyňyzyň nähili sahypada durşuňyza baglylykda brauzeriň adres setirindäki bahanyň nädip üýtşändigine serediň.