Reactjs使用Firebase Auth时React Router路由无法解析如何解决

1. React Router版本不兼容 #

你代码中使用的是React Router v5的API，包括Route组件的render/component属性、Redirect组件等。如果你的项目安装的是v6版本的react-router-dom，这些API已经被完全废弃，会直接导致路由无法正常解析渲染。

2. 未处理Firebase Auth初始加载状态 #

你的AuthContextProvider中user的初始值为undefined，在Firebase完成用户登录态校验之前，isAuthenticated会被误判为false，直接触发重定向逻辑。等Firebase返回真实的用户状态时，页面已经完成跳转，就会出现无论访问什么路由都被强制重定向的问题。

• 确认React Router版本
  执行以下命令查看当前安装的版本：

npm list react-router-dom

如果是v6版本，可以回退到v5的最终稳定版兼容现有代码：

npm install react-router-dom@5.3.4

如果需要使用v6版本，需要重写路由逻辑，将废弃API替换为v6对应的element属性、Navigate组件等。

• 补充Auth加载状态判断
  修改firebase.js中的AuthContextProvider逻辑，新增加载状态避免提前触发重定向：

// firebase.js 修改部分
export const AuthContextProvider = (props) => {
  const [user, setUser] = useState();
  const [error, setError] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(
      getAuth(),
      (user) => {
        setUser(user);
        setLoading(false);
      },
      (err) => {
        setError(err);
        setLoading(false);
      }
    );
    return () => unsubscribe();
  }, []);

  // 加载阶段返回占位UI，不渲染路由避免误跳转
  if (loading) return <div>加载中...</div>;
  return <AuthContext.Provider value={{ user, error, loading }} {...props} />;
};

• 可选：新增兜底404路由
  在App.js所有路由配置的末尾添加兜底路由，避免访问不存在的路径时出现空白：

<Route path="*" render={() => <div>404 页面不存在</div>} />

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