Produkbladsy in die blaaier in Redux

In die vorige les het ons 'n aparte bladsy vir 'n produk gemaak. Nou moet ons maak dat wanneer ons op 'n knoppie klik, ons bladsy in die blaaier verskyn.

Om te begin, laat ons 'n adres daaraan heg waar dit sal verskyn. Maak die lêer App.jsx oop, waarin ons die roetes spesifiseer, en voeg in children nog een kindroete by (moenie die import van ProductPage.jsx vergeet nie). Spesifiseer die pad en die komponent wat ons sal vertoon:

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

Laat ons nou ProductsList.jsx oopmaak in die gids products en die kode vir dispProducts 'n bietjie verander. Nou het ons 'n aparte bladsy met volle inligting oor elke produk. Dit beteken in die produklys sal ons slegs die produknaam en 'n verkorte beskrywingsteks vertoon. Ons sal ook 'n skakel byvoeg in die vorm van 'n navigasie-element Link van die roeteerbiblioteek, waarop geklik kan word om na die produkbladsy te gaan. Laat ons ook 'n klas product-excerpt by die div voeg, om produkte uit mekaar te hou. Nou sal ons kode vir dispProducts so lyk:

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

Laat ons Link importeer:

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

En voeg style by vir die klasse link-btn en product-excerpt in 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;
}

Laastens, laat ons ook die skakel in die linkerkantmenu werkend maak wat na die bladsy met die produklys lei, sodat ons daar kan uitkom vanaf enige ander plek. Om dit te doen, maak ons root.jsx oop en vervang hierdie kode reël:

<a>Products</a>

Met die volgende:

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

Ons moet ook nie vergeet om NavLink te importeer van die React-roeteerbiblioteek nie:

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

Laat ons toepassing begin. Nou kan ons uitkom op die bladsy met inligting oor enige produk deur op die kyk-knoppie te klik. Probeer nou om 'n nuwe produk by te voeg en kyk na die inligting daaroor op 'n aparte bladsy deur op die kyk-knoppie te klik. Ook nou, om terug te keer na die produklys is dit genoeg om op 'Products' in die menu links te klik. Terwyl jy op verskillende bladsye is, kyk hoe die URL in die adresbalk van die blaaier verander.

Maak jou toepassing met studente oop. In die lêer App.jsx, skep nog 'n kindroete vir die studentebladsy.

In die lêer StudentsList.jsx, bring veranderings aan in die kode vir dispStudents, soos gewys in die les.

Maak dat die skakel 'Students' in die linkermenu na die bladsy met die studentelys lei. Gaan na of alles werk.

Kyk hoe die waarde in die adresbalk van die blaaier sal verander, afhangende van op watter bladsy jy tans is.