部署到服务器后React页面持续自动刷新，本地运行无异常如何解决？

问题根因 #

1. Home组件内的axios实例重复创建触发死循环
   你把axiosInstance定义在了Home组件内部，每次组件渲染都会生成一个全新的axios实例对象，而这个实例被放在了useEffect的依赖数组里。所以每次useEffect执行完成后，组件重渲染又会生成新的实例，反过来再触发useEffect重新执行，形成无限循环。如果你的AuthContext里封装了请求错误的拦截逻辑，请求异常时会清空本地存储的用户信息，就会进一步触发路由重定向。
2. 部署环境未正确配置环境变量
   本地开发时你本地的.env文件里配置了REACT_APP_API_URL，但部署到VPS时大概率没有配置对应生产环境的环境变量，导致axios请求的baseURL为undefined，请求直接发送到站点当前域名下，返回404/401错误。如果你的权限逻辑是请求鉴权失败就清空用户状态，就会出现用户状态清空 → 重定向到注册页 → 注册页判断有缓存又跳回首页 → 首页请求再次失败清空状态的死循环，表现为页面每秒刷新。

修复步骤 #

• 把axios实例的定义移出组件外部，或者用useMemo包裹实例避免重复生成：

// 方法1：直接移到组件外定义
const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});
const Home = ({ type }) => {
  // 原有组件逻辑不变
}

// 方法2：在组件内用useMemo包裹
// const axiosInstance = useMemo(() => axios.create({
//   baseURL: process.env.REACT_APP_API_URL,
// }), [])

• 检查部署配置，确保生产环境正确注入了REACT_APP_API_URL变量，打包后请求地址指向正确的后端接口地址。
• 检查AuthContext的逻辑，避免出现鉴权失败就直接清空用户状态的不合理逻辑，可以加错误次数限制或者跳转到登录页后终止跳转逻辑。

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