React集成Firebase+Redux实现登录后跳转首页白屏问题求助

1. 注册后登录白屏原因 #

• 路由跳转路径错误：SignIn.tsx中history.push("../pages/Homepage.tsx")使用的是文件系统路径，而非App中配置的路由路径/homepage，路由匹配失败无组件渲染，导致白屏。
• 异步逻辑时序错误：signin是异步thunk动作，当前代码未等登录请求完成就直接执行跳转，若登录还未完成就跳转到需要登录态的页面，也可能触发权限路由的重定向逻辑导致白屏。

2. 调整逻辑后无限加载原因 #

• 现有signin thunk仅在登录失败时调用传入的onError回调，登录成功时没有任何回调触发，你把setLoading(false)和跳转逻辑放在回调里的话，成功场景永远不会执行，导致局部loading状态一直为true。
• 额外注意：你调用dispatch(history.push())是错误写法，history.push不是Redux action，不需要包裹dispatch执行。

第一步：修正authActions.tsx的signin逻辑 #

确保登录成功后逻辑可被感知，利用thunk返回的Promise即可：

// Log in
export const signin = (data: SignInData, onError: () => void): ThunkAction<Promise<void>, RootState, null, AuthAction> => {
  return async dispatch => {
    try {
      await firebase.auth().signInWithEmailAndPassword(data.email, data.password)
    } catch (err) {
      if(err instanceof Error){
        onError();
        dispatch(setError(err.message));
      }
      console.log(err);
      // 出错时抛出错误，方便外层捕获
      throw err;
    }
  }
}

第二步：修改SignIn.tsx的提交逻辑 #

把提交函数改为异步，等待登录动作完成后再执行后续逻辑，同时修正跳转路径：

const submitHandler = async (e: FormEvent) => {
  e.preventDefault();
  if (error) {
    dispatch(setError(""));
  }
  setLoading(true);
  try {
    // 等待异步登录动作完成
    await dispatch(signin({ email, password }, () => setLoading(false)));
    // 登录成功后跳转，使用路由配置的路径，不要写文件路径
    history.push("/homepage");
    setLoading(false);
  } catch (err) {
    // 错误已在thunk内处理，此处仅保证loading状态复位
    setLoading(false);
  }
};

第三步（可选）补充路由兜底逻辑 #

如果需要避免访问不存在路径时白屏，可在App.tsx的Switch组件最后添加默认重定向：

import { Redirect } from 'react-router-dom';

// 在Switch末尾添加
<Redirect from="/" to="/homepage" exact />

另外需要检查你的PublicRoute组件逻辑：如果PublicRoute限制只有未登录用户才能访问，登录后访问会被重定向，那登录完成后跳转/homepage时会被拦截，建议将首页改为普通Route，或者调整PublicRoute的权限判断规则。

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