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

Question

我使用 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>

Answer 1

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

顺便说一下，您不需要指定push={true} 。 因为它是一个布尔道具，你可以做<Redirect to={url.thankYou()} push/>

Answer 2

一个问题是push={true}打破了后退按钮。 所以感谢你的建议，因为它让我走上了正确的轨道。 另一个问题是我如何处理状态。 父组件中的状态指示正在呈现哪个页面组件，因此我需要一种更新goToConfirm状态的方法。 我还必须做一些奇特的工作来触发thankYouPage组件中的一个方法，在该组件中我绑定到window.onpopstate并触发了一个重置​​所有初始应用程序状态的 prop 方法。 如果有兴趣，这里是最终代码。

  render() {
const goToConfirmationPage = this.state.goToConfirmation;
const goToThankYouPage = this.state.goToThankYou;

return (
  <div id="redeem-root">
    <Switch>
        <Route
          exact path={url.redeemHome()}
          render={() => (
            goToConfirmationPage ? (
              <Redirect to={url.confirm()} push />
            ) : (
              <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/>
            ) : (
              <ConfirmWithClickTracking
                loading={this.state.loading}
                resetConfirmState={this.resetConfirmState}
                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' }}
            />
          )}
        />
      </Switch>
  </div>
)

}