为何isLogin状态变更时组件返回内容未更新？

你的组件在axios验证请求还未完成时，就已经基于初始的isLogin=false执行了跳转逻辑——这是因为React组件会先以初始状态渲染，而useEffect里的异步请求是在首次渲染后才触发执行的。

添加一个加载状态（比如isLoading），在请求完成前不渲染children或Navigate，而是显示加载提示（或空白、骨架屏等）。同时优化异步代码的写法，统一使用async/await并处理错误：

import { Navigate } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";

const Protected = ({ children }) => {
  const [isLogin, setIsLogin] = useState(false);
  // 添加加载状态，初始为true表示正在验证
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkLogin = async () => {
      try {
        const token = localStorage.getItem('tkn');
        const res = await axios.post('http://localhost:5000/auth', { token });
        setIsLogin(res.data.login);
      } catch (error) {
        // 请求失败或token无效时，标记为未登录
        setIsLogin(false);
        console.error('验证失败:', error);
      } finally {
        // 无论成功失败，结束加载状态
        setIsLoading(false);
      }
    };

    checkLogin();
  }, []);

  // 加载中时，返回加载提示（可根据需求自定义）
  if (isLoading) {
    return <div>验证中...</div>;
  }

  return isLogin ? children : <Navigate to="/" />;
};

export default Protected;

• 新增isLoading状态：确保在验证结果出来前，不会直接执行跳转或渲染页面内容
• 统一async/await写法：替代then链式调用，代码更简洁易读
• 增加错误处理：用try/catch捕获请求失败、token无效等异常情况，避免组件一直卡在加载状态
• 修正命名规范：把setisLogin改为setIsLogin，符合React驼峰命名习惯

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