为React Router的PrivateRoute添加exact后组件无法渲染问题咨询

问题原因 #

• exact属性的匹配逻辑冲突
  exact的作用是要求路径完全匹配才会触发路由渲染。你给path="/"的PrivateRoute添加exact后，只有用户访问根路径/时才会匹配该路由，如果你站点下的其他私有路径（比如/dashboard、/profile等）无法匹配到这个带exact的根路由，自然就不会触发对应的组件渲染，也不会走鉴权逻辑。
• 未处理Firebase Auth的初始化加载状态
  Firebase Auth初始化时需要异步拉取当前用户的登录状态，在初始化完成前currentUser的值为null，你的现有逻辑会直接触发重定向到登录页，会让你误以为组件没有渲染。这个问题在加exact后更容易暴露，因为路由匹配范围变窄，状态更新后可能无法重新触发匹配。

解决方案 #

1. 按需使用exact属性，调整路由顺序 #

如果你只需要用根路径的PrivateRoute统一管控所有私有路由的鉴权，不需要给它加exact属性，保持现有写法即可：

<Switch>
  <Route exact path="/login" component={Login} />
  {/* 不加exact，匹配所有/开头的私有路径 */}
  <PrivateRoute path="/" component={Home}/>
</Switch>

如果你确实需要给多个PrivateRoute配置exact做路径区分，请把更精确的路由放在Switch的前面，模糊路由放在最后：

<Switch>
  <Route exact path="/login" component={Login} />
  <PrivateRoute exact path="/" component={Home}/>
  <PrivateRoute exact path="/settings" component={Settings}/>
  <PrivateRoute path="/user" component={UserLayout}/>
</Switch>

2. 新增Auth加载状态，避免初始化时错误重定向 #

修改AuthContext的逻辑，新增loading状态标记Auth初始化进度：

// AuthContext 实现修改
const [currentUser, setCurrentUser] = useState(null);
// 新增loading状态
const [loading, setLoading] = useState(true);

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(user => {
    setCurrentUser(user);
    // 初始化完成后关闭loading
    setLoading(false);
  });
  return unsubscribe;
}, []);

return (
  <AuthContext.Provider value={{ currentUser, loading }}>
    {/* loading时不渲染子组件，避免路由逻辑提前执行 */}
    {!loading && children}
  </AuthContext.Provider>
);

如果需要保留loading时的页面展示，也可以修改PrivateRoute的逻辑，加载时渲染占位UI：

const PrivateRoute = ({ component: RouteComponent, ...rest}) => {
  const { currentUser, loading } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={(routeProps) => {
        // 加载中渲染加载提示
        if(loading) return <div>加载中...</div>
        return !!currentUser ? (
          <RouteComponent {...routeProps}/>
        ) : (
          <Redirect to={"/login"} />
        )
      }}
    />
  );
};

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