Produkta lapa pārlūkprogrammā Redux

Iepriekšējā nodarbībā mēs izveidojām atsevišķu lapu produktam. Tagad mums ir jāpanāk, lai, noklikšķinot uz kādas pogas, mūsu lapa parādītos pārlūkprogrammā.

Sākumam piešķirsim tai adresi, pēc kuras tā tiks rādīta. Atversim failu App.jsx, kurā mēs norādām maršrutus, un pievienosim children vēl vienu pakārtoto maršrutu (neaizmirstiet importēt ProductPage.jsx). Norādīsim ceļu un komponentu, kuru izvadīsim:

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

Tagad atversim ProductsList.jsx mapē products un nedaudz mainīsim kodu dispProducts. Tagad mums ir atsevišķa lapa ar pilnu informāciju par katru produktu. Tas nozīmē, ka produktu sarakstā mēs rādīsim tikai produkta nosaukumu un saīsinātu apraksta tekstu. Mēs pievienosim arī saiti navigācijas elementa veidā Link no maršrutētāja bibliotēkas, uz kuru noklikšķinot varēs nokļūt uz produkta lapas. Pievienosim arī div klasi product-excerpt, lai atdalītu produktus. Tagad mūsu kods dispProducts būs šāds:

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>
))

Importēsim Link:

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

Un pievienosim stilus klasei link-btn un product-excerpt failā 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;
}

Visbeidzot, padarīsim strādājošu arī saiti kreisajā izvēlnē, kas ved uz lapu ar produktu sarakstu, lai mēs varētu iekļūt tajā no jebkuras citas vietas. Lai to izdarītu, atversim mūsu root.jsx un aizstāsim šo koda rindu:

<a>Products</a>

Ar šādu:

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

Arī neaizmirsīsim importēt NavLink no React maršrutētāja bibliotēkas:

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

Palaism mūsu lietotni. Tagad mēs varam iekļūt lapā ar informāciju par jebkuru produktu, noklikšķinot uz skatīšanas pogas. Mēģiniet tagad pievienot jaunu produktu un apskatiet informāciju par to atsevišķā lapā, noklikšķinot uz skatīšanas pogas. Arī tagad, lai atgrieztos pie produktu saraksta, pietiek ar klikšķi uz 'Products' izvēlnē pa kreisi. Atrodoties dažādās lapās, apskatieties, kā mainās URL pārlūkprogrammas adreses joslā.

Atveriet savu studentu lietotni. Failā App.jsx izveidojiet vēl vienu pakārtoto maršrutu studenta lapai.

Failā StudentsList.jsx veiciet kodā izmaiņas dispStudents, kā parādīts nodarbībā.

Padariet tā, lai saite 'Students' kreisajā izvēlnē vestu uz lapu ar studentu sarakstu. Pārbaudiet, vai viss darbojas.

Paskatieties, kā mainīsies vērtība pārlūkprogrammas adreses joslā atkarībā no tā, uz kuras lapas jūs pašlaik atrodaties.