Trang sản phẩm trong trình duyệt với Redux

Ở buổi học trước, chúng ta đã tạo một trang riêng cho sản phẩm. Bây giờ chúng ta cần làm sao để khi nhấp vào một nút bất kỳ thì trang của chúng ta sẽ xuất hiện trong trình duyệt.

Đầu tiên, hãy gán cho nó một địa chỉ, nơi nó sẽ được hiển thị. Mở tệp App.jsx, trong đó chúng ta khai báo các tuyến đường, và thêm vào children một tuyến đường con nữa (đừng quên import ProductPage.jsx). Chỉ định đường dẫn và component sẽ được hiển thị:

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

Bây giờ hãy mở ProductsList.jsx trong thư mục products và sửa đổi một chút mã cho dispProducts. Bây giờ chúng ta đã có một trang riêng với đầy đủ thông tin về từng sản phẩm. Điều này có nghĩa trong danh sách sản phẩm chúng ta sẽ chỉ hiển thị tên sản phẩm và phần mô tả rút gọn. Chúng ta cũng thêm một liên kết dưới dạng phần tử điều hướng Link từ thư viện định tuyến, khi nhấp vào đó có thể chuyển đến trang sản phẩm. Hãy thêm cho div class product-excerpt để phân tách các sản phẩm. Bây giờ mã của chúng ta cho dispProducts sẽ như thế này:

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 Link:

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

Và thêm kiểu cho các class link-btn và product-excerpt trong 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;
}

Cuối cùng, hãy cũng làm cho liên kết trong menu bên trái, dẫn đến trang danh sách sản phẩm, hoạt động để chúng ta có thể truy cập vào nó từ bất kỳ nơi nào khác. Để làm điều này, hãy mở root.jsx của chúng ta và thay thế dòng mã này:

<a>Products</a>

Bằng dòng sau:

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

Cũng đừng quên import NavLink từ thư viện cho React router:

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

Hãy chạy ứng dụng của chúng ta. Bây giờ chúng ta có thể đi đến trang thông tin về bất kỳ sản phẩm nào bằng cách nhấn vào nút xem. Hãy thử thêm một sản phẩm mới và xem thông tin về nó trên trang riêng bằng cách nhấn nút xem. Cũng vậy, bây giờ, để quay lại danh sách sản phẩm chỉ cần nhấp vào 'Products' trong menu bên trái. Khi ở trên các trang khác nhau, hãy xem URL trên thanh địa chỉ trình duyệt thay đổi như thế nào.

Mở ứng dụng về sinh viên của bạn. Trong tệp App.jsx, hãy tạo thêm một tuyến đường con cho trang sinh viên.

Trong tệp StudentsList.jsx, hãy sửa đổi mã cho dispStudents như đã trình bày trong bài học.

Hãy làm sao để liên kết 'Students' trong menu bên trái dẫn đến trang danh sách sinh viên. Kiểm tra xem mọi thứ đã hoạt động chưa.

Hãy xem giá trị trên thanh địa chỉ trình duyệt sẽ thay đổi như thế nào, tùy thuộc vào trang bạn hiện đang ở.