React路由鉴权组件出现Maximum update depth exceeded错误求助

错误原因 #

1. 无限路由跳转循环：你的/login路由错误地使用了需要鉴权的PrivateRoute2组件包裹Profile。当用户未认证时，PrivateRoute2会跳转至/login，触发该路由再次加载PrivateRoute2，形成无限跳转循环，直接导致「Maximum update depth exceeded」错误。
2. useEffect依赖缺失警告：isUserAuth函数在组件每次渲染时都会重新创建，而useEffect的依赖数组为空，不符合React的依赖追踪规则，触发了依赖相关的警告（这不是循环渲染的直接原因，但需要修复以消除警告）。

解决方法 #

1. 修正路由配置，移除登录页的鉴权包裹 #

登录页是公开访问的页面，不需要通过PrivateRoute2鉴权。直接在/login路由渲染登录组件即可：

function App () {
return (
  <div className="App">
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Index />} />
        {/* 直接渲染登录组件，无需鉴权 */}
        <Route path='/login' element={<Login />} /> 
        <Route path='/profile' element={
          <PrivateRoute2>
            <Profile />
          </PrivateRoute2>
        } />
        <Route path="/404" element={<Err404 />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/register" element={<Register />} />
      </Routes>
    </BrowserRouter>
  </div>
);
}

export default App;

2. 修复useEffect依赖警告，缓存鉴权函数 #

使用useCallback缓存isUserAuth函数，避免每次渲染重新创建，并将其加入useEffect的依赖数组，消除React的依赖警告：

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

const PrivateRoute2 = ({ children }) =>{
  const [isloggedin, setLoggedin] = useState(false)
  const [isLoading, setIsLoading] = useState(true);

  // 用useCallback缓存函数，避免重复创建
  const isUserAuth = useCallback(async() =>{
    try {
      const response = await fetch('http://localhost:3001/isUSerAuth',{
        method: "GET",
        headers: { "x-access-token": localStorage.getItem("token") },   
      });
      const data = await response.json();
      setLoggedin(data.auth === true);
      setIsLoading(false);
    } catch (error) {
      console.log(error.message);
      setLoggedin(false);
      setIsLoading(false);
    }
  }, []);

  useEffect(()=>{
    isUserAuth();
  }, [isUserAuth]) // 添加缓存后的函数作为依赖

  return (
    isLoading ? <p>Loading....</p> : isloggedin ? children : <Navigate to="/login" />
  );
}

export default PrivateRoute2

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