React Router条件渲染Redirect时跳转后出现空白页问题

• 重定向逻辑配置错误导致无限重渲染死循环
  你将Redirect直接放在Switch内部，未用Route包裹也未配置from匹配规则，只要hasTrialExpired为真且subscriptionStatus !== ACTIVE的条件成立，无论当前处于什么路由路径，都会触发跳转到PAYMENTS路径。跳转至支付路径后，上述判断条件依然成立，会再次触发重定向，形成无限重定向死循环，导致页面反复重渲染最终崩溃空白。同时你给Redirect添加的exact属性没有实际作用，该属性仅搭配from路径匹配规则时生效，未配置from时该配置无效。

参考修复方案：

<BrowserRouter>
  <View style={{ flex: 1 }}>
    <Switch>
      <Route exact path={PAYMENTS} component={PaymentPage} />
      <Route path="*">
        {hasTrialExpired && subscriptionStatus !== ACTIVE ? (
          <Redirect to={PAYMENTS} />
        ) : (
          {/* 其他正常路由逻辑 */}
        )}
      </Route>
    </Switch>
  </View>
</BrowserRouter>

• 路由组件引用不匹配
  你在路由配置中给PAYMENTS路径指定的渲染组件是PaymentPage，但你贴出的支付页面组件实际是PaymentInfoCollectionPage，如果你没有将PaymentInfoCollectionPage重命名导入为PaymentPage，就会导致路由匹配后找不到对应组件，渲染空白。
• 异步状态更新触发逻辑冲突
  如果hasTrialExpired和subscriptionStatus是接口请求获取的异步状态，初始值可能不满足重定向条件，此时支付页面会正常渲染，等异步请求返回更新状态后，重定向条件触发进入死循环，就会出现页面短暂显示后变空白的现象。
• React Router版本不兼容
  如果你使用的是React Router v6及以上版本，Switch组件已经被废弃替换为Routes，Redirect组件也不再被支持，错误的API用法也会导致路由渲染异常。

内容的提问来源于stack exchange，提问作者CaitlynCodr