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:

routes/product.jsxfunction 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:

routes/product.jsxfunction 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:

routes/product.jsxreturn (
  <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:

main.jsximport 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:

main.jsx{
  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.