时间戳

首页 > 解决方案 > 使用侧边栏组件反应参数路由

reactjs - 使用侧边栏组件反应参数路由

问题描述

我有一个带有两个容器的路由部分。一个是包含登录和注册页面的登录容器，而另一个具有其他路由。看看这里：默认容器有一个 FloatCart 组件，它充当某种侧面组件。单击 FloatCart 会导致一条新路线“结帐”。只要没有带参数的路线，它就可以正常工作。但是，每当我尝试从产品详细信息页面移动时，URL 都会更改为“产品/结帐”。我该如何摆脱这个？我只想路由到“结帐”

我尝试将产品详细信息页面向上移动到层次结构，但它也不起作用。

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');

标签： reactjsreact-router

解决方案

修复：

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

推荐阅读