Thêm một tuyến đường khác vào React Router

Chúng ta có tuyến đường gốc dẫn đến trang chủ, trên đó có các liên kết đến sản phẩm. Bây giờ hãy thêm một tuyến đường khác để khi nhấp vào một trong các liên kết, trang sản phẩm sẽ hiển thị, thay vì màn hình lỗi.

Đầu tiên, hãy mở ứng dụng của chúng ta đã làm trong các bài học trước và tạo trong thư mục routes tệp product.jsx. Hãy tạo trong đó một thành phần Product:

function Product() {}

export default Product;

Bây giờ hãy tạo bên trong Product một đối tượng product, với các thuộc tính name, cost và amount, hiện tại đây sẽ là một số giá trị cố định:

function Product() {
	const product = {
		name: 'Sản phẩm',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Và trên trang sản phẩm, chúng ta sẽ hiển thị tương ứng, tên của nó, giá và số lượng:

return (
	<div>
		<h2>Trang sản phẩm</h2>
		<p>Tên: {product.name}</p>
		<p>Giá: {product.cost}</p>
		<p>Số lượng: {product.amount}</p>
	</div>
);

Nhớ thêm việc nhập thành phần Product vào tệp main.jsx:

import Product from './routes/product';

Và cuối cùng, hãy thêm một tuyến đường nữa vào ứng dụng của chúng ta, hãy làm điều này ngay sau tuyến gốc. Đặt đường dẫn là 'products/:productId', và phần tử để hiển thị sẽ là thành phần Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Và bây giờ hãy khởi động ứng dụng, nhấp vào các liên kết và chúng ta sẽ thấy trang sản phẩm (hiện tại nó giống nhau cho tất cả các liên kết), thay vì trang lỗi.

Hãy lấy ứng dụng được tạo bởi bạn trong các nhiệm vụ của các bài học trước. Sử dụng tài liệu của bài học, hãy tạo tương tự tệp student.jsx, trên trang sinh viên hãy hiển thị tên, họ, năm nhập học và chuyên ngành của họ. Thêm một tuyến đường mới cho trang sinh viên vào tệp main.jsx, đặt giá trị path thành 'students/:studentId'. Hãy đảm bảo rằng khi nhấp vào các liên kết, bây giờ bạn sẽ vào được trang sinh viên.