React param routing with Sidebar组件

Question

我有一个有两个集装箱的路由区。一个是登录容器，包含登录和注册页面，另一个是其他路由。看看这里:默认容器有一个FloatCart组件，它充当某种辅助组件。点击FloatCart leads转到一个新的路线'Checkout‘。只要没有带参数的路由，它就能正常工作。但是，每当我尝试从产品详细信息页面移动时，URL都会变为“Product /checkout”。我怎么才能摆脱这个？我只想转到“结账”

我曾尝试将Product Details页面向上移动到层次结构中，但也不起作用。

const DefaultContainer = () => (
  <div>
    <FloatCart />
    <Route exact path="/menu" component={Menu} />
    <Route exact path="/product/:id" component={ProductDetails} />
    <Route exact path="/checkout" component={CheckoutInfo} />
    <Route exact path="/order-details" component={ConfirmOrder} />
    <Route exact path="/payment" component={Payment} />
    <Route exact path="/order-placed" component={Success} />
  </div>
);

这是我的路由部分：

            <Router>
          <Switch>
            <Route exact path="/" component={LoginContainer} />
            <Route exact path="/login" component={LoginContainer} />
            <Elements>
            <Route component={DefaultContainer} />
            </Elements>
          </Switch>
        </Router>

编辑:这是我用来推送到另一个路由的代码：this.props.history.push('./checkout');

Answer 1

修复：

用this.props.history.push('/checkout')代替：this.props.history.push('/.checkout')