Question

我已经使用React Router v4构建了一个应用程序，该应用程序无法正常工作。浏览器的后退按钮根本不起作用。我认为这是由于某些剩余状态所致，但事实并非如此。这是render方法：

因此，路由按预期方式工作，但是当您单击返回时，则不会发生任何事情。我想念什么吗？

<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>

Answer 1

似乎在push={true}组件中进行Redirect会将额外的堆栈推入BrowserHistory中。删除它，它应该可以工作

顺便说一句，您无需指定push={true}。由于它是布尔型道具，因此您可以<Redirect to={url.thankYou()} push/>

Answer 2

一个问题是push={true}破坏了后退按钮。因此，感谢您的建议，因为它使我处于正确的轨道。另一个问题是我如何处理状态。父组件中的状态决定了要呈现哪个页面组件，因此我需要一种更新goToConfirm状态的方法。我还必须做一些花哨的工作才能在绑定到thankYouPage的{{1}}组件中触发一个方法，并触发一个prop方法来重置所有初始应用程序状态。如果有兴趣，这是最终代码。

window.onpopstate

}

React Router V4浏览器返回不起作用

2 个答案: