反应路由器参数错误

Question

编辑：我找到了问题，我继续仔细检查了标题组件。我使用的是相对路径“ login”，而不是绝对路径“ / login”。当我从“登录”切换到“ /登录”时，此问题已解决。

我在使用React Router时遇到问题。我有App Class组件，可以在其中找到所有路线。问题是，当我转到“产品”页面（http://localhost:3000/products）时，我可以直接链接到“ ProductPage”，并在其中获得路线“ http://localhost:3000/products/Scotts”；但是，当我从该路线导航到另一个插入的路线（例如“ LoginPage”）时，得到的路线是“ http://localhost:3000/products/login”而不是“ http://localhost:3000/login”。我将在下面分享重要的代码段。

 <Router> 
        <div className="App">
          <ScrollToTop />
            <Header/>  
            <Switch >
              <Route exact path="/" component={ LandingPage }/>

          <Route  exact path="/login" component={ LoginPage }/>

              <Route  exact path="/products" component={ Products }/>
              <Route 
                exact 
                path="/products/:product"
                render={props => {
                  return <ProductPage {...props} />;
                }} 
              /> 

              <Route path="resetPassword/:id" component={ChangePassword} />
            </Switch>
          <Footer />
        </div>
      </Router>

在这里，我从“产品”路由链接到产品的单页路由：

 {currentProducts.map(item => {
                const { image, title, price, stock } = item;
                return (
                    <div className="product-wrap" key={uuid()}>
                        <Link 
                            to={{
                                pathname: `${location.pathname}/${item.title}`,
                                state: {
                                    item: item,
                                    inStock: stock
                                }
                            }}
                            >
                            <div>
                                <div className="product">
                                    <div className="circle">
                                        <img alt="item" src={image} />
                                    </div>
                                </div>
                            </div>
                        </Link>
                        <div
                            style={{ textDecoration: "none", color: "black" }}
                            className="title"
                        >
                            {title}
                        </div>
                        <div
                            style={{ textDecoration: "none", color: "black" }}
                            className="price"
                        >
                            ${price}
                        </div>
                    </div>
                );
            })}