javascript - React Router V4 浏览器返回不工作

标签 javascript reactjs react-router-v4

我使用 react router v4 构建了一个应用程序,但它没有按预期工作。浏览器后退按钮根本不起作用。我认为这是由于一些剩余的状态,但似乎并非如此。这是渲染方法:

因此路由按预期工作,但是当您单击返回时没有任何反应。我错过了什么吗?

<div id="redeem-root">
  <BrowserRouter basename={url.basename()}>
    <Fragment>
      <Route
        exact
        path={url.redeemHome()}
        render={() =>
          goToConfirmationPage ? (
            <Redirect to={url.confirm()} push={true} />
          ) : (
            <EnterGiftCard
              loading={this.state.loading}
              selectedCardType={this.state.selectedCardType}
              giftCardStartRedemption={this.giftCardStartRedemption}
              isSmallView={this.state.isSmallView}
              error={this.state.error}
              setActiveCardType={this.setActiveCardType}
              setPin={this.setPin}
              pin={this.state.pin}
            />
          )
        }
      />
      <Route
        exact
        path={url.confirm()}
        render={() =>
          goToThankYouPage ? (
            <Redirect to={url.thankYou()} push={true} />
          ) : (
            <ConfirmWithClickTracking
              loading={this.state.loading}
              pin={this.state.pin}
              selectedCardType={this.state.selectedCardType}
              entitlement={this.state.entitlement}
              giftCardConfirmRedemption={this.giftCardConfirmRedemption}
              error={this.state.error}
              trackingInfo={{ pageName: 'RedeemConfirm' }}
            />
          )
        }
      />

      <Route
        exact
        path={url.thankYou()}
        render={() => (
          <ThankYouWithClickTracking
            selectedCardType={this.state.selectedCardType}
            userEmailAddress={this.state.userEmailAddress}
            entitlement={this.state.entitlement}
            resetState={this.resetState}
            trackingInfo={{ pageName: 'RedeemThankYou' }}
          />
        )}
      />
    </Fragment>
  </BrowserRouter>
</div>

最佳答案

好像在做push={true}在你的Redirect组件正在将一个额外的堆栈插入您的 BrowserHistory .删除它,它应该可以工作

顺便说一下,你不需要指定 push={true} .因为它是一个 bool Prop ,你可以做 <Redirect to={url.thankYou()} push/>

关于javascript - React Router V4 浏览器返回不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51959084/

相关文章:

Javascript/jQuery 图像缩放插件

javascript - 每次鼠标移动时,使 JQuery 工具提示检索一个新值

javascript - 表单提交后的状态更改会在 React 中立即恢复

reactjs - 使用 React-router 防止组件被卸载

javascript - Material-UI DataGrid 组件使用新状态数据刷新

reactjs - 如何防止react-router v4中两条路由匹配?

javascript - 如何在 Mongodb Node js 中使用 EJS 在前端显示数组?

javascript - Backbone - 在实例化时为模型分配索引

javascript - 如何延迟 NavLink 的 react ?

reactjs - 如何使用 react 路由器获取以前的位置?