React Router Dom Link 有问题答案

【问题标题】：React Router Dom Link is having issuesReact Router Dom Link 有问题
【发布时间】：2020-10-16 18:00:04
【问题描述】：

所以我在我的反应应用程序中设置了如下路线

const Routes = () => {
  return (
    <Router>
      <Switch>
        <ScrollToTop>
          <Suspense
            fallback={
              <div className="doncomi-preloader-wrapper">
                <div className="doncomi-preloader">
                  <span></span>
                  <span></span>
                </div>
              </div>
            }
          >
            <Header />
            <Route exact path="/" component={Home} />
            <Route path="/signin" exact component={SignIn} />
            <Route path="/signup" exact component={SignUp} />
            <Route exact path="/shop" component={Shop} />
            <Route path="/product" exact component={SearchPage} />
            <Route path="/product/:productId" exact component={ProductPage} />
            <PrivateRoute path="/account" exact component={UserAccount} />
            <VendorRoute
              path="/partners/account"
              exact
              component={VendorAccount}
            />
            <VendorRoute
              path="/create/category"
              exact
              component={AddCategory}
            />
            <VendorRoute path="/create/product" exact component={AddProduct} />
          </Suspense>
        </ScrollToTop>
      </Switch>
    </Router>
  );
};

export default Routes;

在从父组件接收道具的组件中，我有一个按钮，用于根据作为道具接收的 ID 路由到不同的产品。这就是按钮的设置方式

 <Link to={`product/${product._id}`}>
            <button className="btn btn-outline-warning mr-3">
              View product
            </button>

问题是，当我单击按钮时，它会将 url 附加到已经存在的 url 而不是替换它。所以我最终会路由到某物/产品/productId。

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

因此，发布此消息后，我立即意识到我忘了添加/ Link 组件中的路由之前??‍♂️?

【讨论】：

没错，你给了它一个相对的 URL，而不是一个绝对的。