时间戳

首页 > 解决方案 > 在 Javascript / React-Router 中无法正常工作

javascript - 在 Javascript / React-Router 中无法正常工作

问题描述

我想为产品创建一个详细信息页面。我有一个显示所有对象的页面（在 http://localhost:3000/products/all 中），我的详细信息页面位置是 http://localhost:3000/product/headphons120/12/（例如），我使用这个代码：

{products.map((product) => (
          <Link
            key={product.id}
            to={`product/${product.slug}/${product.id}/`}
            className="p-link"
          >
            <div className="product">
              <div className="cover">
                <img src={`http://localhost:5000${product.photo}`} />
              </div>
              <div className="p-inform">
                <span>{product.name}</span>
                <span>{product.price}</span>
                <span>{product.point}</span>
              </div>
            </div>
          </Link>
        ))}

但除了all页面product/${product.slug}/${product.id}/：http://localhost:3000/products/all

结果：http://localhost:3000/products/product/T-shirt/9/

我想要 http://localhost:3000/product/T-shirt/9/

我该如何解决？

标签： javascriptreactjs

解决方案

每当我们在 Link 组件中使用相对路径时，我们都需要在 URL 之前添加 /。

<Link to="/product/${product.slug}/${product.id}"></Link>

推荐阅读