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

}