React中如何延迟render函数调用直至useEffect执行完成？

React 中useEffect的执行时机是组件完成首次渲染、DOM提交更新之后，属于异步非阻塞执行的钩子，无法拦截组件的首次渲染逻辑。原有代码中组件第一次执行render时，Auth.currentAuthenticatedUser请求还没发出，Redux中存储的User还是初始空值，会直接命中重定向逻辑，这就是render执行早于接口返回的核心原因。

核心思路是增加鉴权加载态标记：在用户身份校验接口返回结果前，不做放行/重定向的路由判断，先渲染加载占位内容，等接口返回、用户信息写入Redux后，再关闭加载态，执行正常的路由权限判断。
修正后的可运行代码如下：

import React, { useEffect, useState } from "react";
import { Route, Redirect } from "react-router-dom";
import { setUser } from "../redux/userSlice";
import { useDispatch, useSelector } from "react-redux";
import { Auth } from "aws-amplify";

const ProtectedRoute = ({ children, ...rest }) => {
  const dispatch = useDispatch();
  const User = useSelector((state) => state.user);
  // 鉴权加载状态，初始值为true代表校验未完成
  const [isAuthLoading, setIsAuthLoading] = useState(true);

  useEffect(() => {
    // 注意：不要直接给useEffect传入async函数，否则会导致清理函数返回异常
    const fetchUserAuth = async () => {
      try {
        const currentUser = await Auth.currentAuthenticatedUser({});
        dispatch(setUser(currentUser));
      } catch (err) {
        console.log("身份校验失败：", err);
      } finally {
        // 无论校验成功/失败，都关闭加载态，避免永久卡住
        setIsAuthLoading(false);
      }
    };
    fetchUserAuth();
  }, [dispatch]);

  return (
    <Route
      {...rest}
      render={({ location }) => {
        // 校验未完成时，渲染加载占位，不执行路由跳转判断
        if (isAuthLoading) {
          return <div>用户身份校验中，请稍候...</div>;
        }
        // 校验完成后，根据用户状态判断放行还是重定向
        return User ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/create-profile",
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
};
export default ProtectedRoute;

• 新增isAuthLoading状态拦截首次渲染的路由判断逻辑，从根本上解决接口未返回时误触发重定向的问题
• 修复了直接给useEffect传递async函数的不规范写法，避免React抛出的钩子返回值类型警告
• 用finally保证加载状态一定能被重置，不会出现页面永久卡在加载态的异常
• 补充了useEffect依赖项数组中的dispatch，符合React Hooks的依赖校验规则

如果项目中有多个受保护路由，可以把鉴权逻辑上移到应用根组件（如App根组件、路由外层容器），应用初始化时就统一拉取一次用户信息存入Redux，等全局鉴权完成后再渲染整套路由，避免每个受保护路由单独发起鉴权请求、重复处理加载态。

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