Halaman Produk dalam Pelayar di Redux

Dalam pelajaran lepas, kami telah membuat halaman berasingan untuk produk. Sekarang kami perlu memastikan bahawa apabila butang ditekan, halaman kami akan muncul dalam pelayar.

Pertama, mari kita tetapkan alamat di mana ia akan dipaparkan. Buka fail App.jsx, di mana kami menentukan laluan, dan tambahkan satu lagi laluan anak dalam children (jangan lupa untuk mengimport ProductPage.jsx). Tentukan laluan dan komponen yang akan dipaparkan:

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

Sekarang mari kita buka ProductsList.jsx dalam folder products dan ubah suai kod untuk dispProducts sedikit. Sekarang kami mempunyai halaman berasingan dengan maklumat penuh tentang setiap produk. Ini bermakna dalam senarai produk kami hanya akan memaparkan nama produk dan teks penerangan yang dipendekkan. Kami juga akan menambah pautan dalam bentuk elemen navigasi Link dari perpustakaan penghala, yang apabila ditekan akan membawa ke halaman produk. Mari kita tambah juga kelas div product-excerpt, untuk memisahkan produk. Sekarang kod kami untuk dispProducts akan kelihatan seperti ini:

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

Mari import Link:

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

Dan tambah gaya untuk kelas link-btn dan product-excerpt dalam 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;
}

Akhir sekali, mari kita juga menjadikan pautan dalam menu di sebelah kiri, yang membawa ke halaman senarai produk, berfungsi supaya kami boleh memasukiinya dari mana-mana tempat lain. Untuk melakukan ini, buka root.jsx kami dan gantikan baris kod ini:

<a>Products</a>

Dengan yang berikut:

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

Juga jangan lupa untuk mengimport NavLink dari perpustakaan untuk React router:

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

Mari lancarkan aplikasi kami. Sekarang kami boleh keluar ke halaman maklumat tentang mana-mana produk dengan menekan butang paparan. Cuba tambah produk baru sekarang dan lihat maklumat tentangnya pada halaman berasingan dengan menekan butang paparan. Juga sekarang, untuk kembali ke senarai produk cukup klik pada 'Products' dalam menu di sebelah kiri. Semasa berada di halaman yang berbeza, lihat bagaimana URL dalam bar alamat pelayar berubah.

Buka aplikasi anda dengan pelajar. Dalam fail App.jsx, buat satu lagi laluan anak untuk halaman pelajar.

Dalam fail StudentsList.jsx, buat perubahan pada kod untuk dispStudents, seperti yang ditunjukkan dalam pelajaran.

Pastikan pautan 'Students' dalam menu kiri membawa ke halaman senarai pelajar. Semak semula bahawa semuanya berfungsi.

Lihat bagaimana nilai dalam bar alamat pelayar berubah, bergantung pada halaman mana anda berada pada masa ini.