路由保护时触发Maximum Depth Limit Exceeded错误，请求排查代码问题

嘿，我一眼就发现问题所在啦！你遇到的这个无限循环错误，根源是把登录/注册页面也用ProtectedRoute给保护起来了。

咱们理一理这个死循环的逻辑：当用户未登录时，ProtectedRoute会把用户重定向到/auth页面，但你在App.js里给/auth路由也套了ProtectedRoute——这就导致用户刚被跳转到/auth，又因为未登录状态被ProtectedRoute再次重定向到/auth，无限循环下去，最终触发了Maximum Depth Limit Exceeded错误。

同样的，/register作为注册页面，也不应该被路由保护，毕竟只有未登录用户才需要访问注册页对吧？

修复方案：修改App.js的路由配置 #

把/auth和/register路由的ProtectedRoute包裹去掉，让未登录用户可以直接访问这两个页面：

import {BrowserRouter as Router , Routes , Route , useNavigate} from "react-router-dom"
import Home from "./pages/Home"
import Auth from "./pages/Auth"
import Profile from "./pages/Profile"
import Bookmark from "./pages/Bookmark"
import NotFound from "./pages/NotFound"
import Explore from "./pages/Explore"
import TrendingTags from "./pages/TrendingTags"
import Discover from "./pages/Discover"
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Register from "./pages/Register"
import EditProfile from "./pages/EditProfile"
import ProtectedRoute from "./components/ProtectedRoute"

function App() {
  return (
    <Router>
      <ToastContainer />
      <Routes>
        <Route path="/" element={<ProtectedRoute><Home/></ProtectedRoute>}/>
        {/* 去掉ProtectedRoute，允许未登录用户访问登录页 */}
        <Route path="/auth" element={<Auth/>}/>
        <Route path="/profile" element={<ProtectedRoute><Profile/></ProtectedRoute>}  />
        <Route path="/message" element={<ProtectedRoute><NotFound/></ProtectedRoute>}  />
        <Route path="/notifications" element={<ProtectedRoute><NotFound/></ProtectedRoute>}  />
        <Route path="/bookmark" element={<ProtectedRoute><Bookmark/></ProtectedRoute>}  />
        <Route path="/explore" element={<ProtectedRoute><Explore/></ProtectedRoute>}  />
        <Route path="/explore/trending/:tagName" element={<ProtectedRoute><TrendingTags/></ProtectedRoute>}  />
        <Route path="/discover" element={<ProtectedRoute><Discover/></ProtectedRoute>}  />
        {/* 同样去掉ProtectedRoute，允许未登录用户访问注册页 */}
        <Route path="/register" element={<Register />}  />
        <Route path="/profile/edit" element={<ProtectedRoute><EditProfile /></ProtectedRoute>}  />
      </Routes>
    </Router>
  );
}

export default App;

额外小建议 #

你的AUTH_FUNC是同步读取localStorage，目前没问题，但如果之后改成异步验证（比如调用后端接口），记得在ProtectedRoute里加上加载状态，避免页面闪烁：

import React , {useContext, useState, useEffect} from "react";
import { Navigate } from "react-router-dom";
import TwitterContext from "../context/TwitterContext";

export default function ProtectedRoute ({children}) {
  const {AUTH_FUNC} = useContext(TwitterContext)
  const [isLoading, setIsLoading] = useState(true)
  const [loggedin, setLoggedin] = useState(false)

  useEffect(() => {
    // 假设改成异步验证的情况
    const checkAuth = async () => {
      const res = await AUTH_FUNC()
      setLoggedin(res)
      setIsLoading(false)
    }
    checkAuth()
  }, [])

  if(isLoading){
    return <div>加载中...</div> // 这里可以替换成你的自定义加载组件
  }

  if(!loggedin){
    return <Navigate to="/auth"/>
  }

  return children
};

这样修改后，应该就能解决无限循环的问题啦！

备注：内容来源于stack exchange，提问作者Abhay Bisht