React实现路由守卫时useEffect触发逻辑引发页面无限刷新循环

• 全局逻辑无访问边界：App组件中的全局useEffect未对当前路径做判断，只要检测到未认证状态，就无条件执行window.location.href = '/login'的整页跳转。即便已经成功跳转到/login路径，App组件每次挂载、重渲染时都会重复执行这段逻辑，形成“整页跳转/login → 重新加载App → 判断未认证 → 再次跳转/login”的死循环。同时该effect的依赖数组未正确配置，引用了authenticated状态却没有声明对应依赖，本身逻辑就存在失效问题。
• 路由守卫逻辑错位：当前实现的ProtectedRoute组件实际逻辑是“已认证用户禁止访问目标路径，未认证用户可正常访问”，但本该做权限拦截的受保护路径/home，直接使用了原生Route，完全没有权限校验逻辑。
• 跳转方式不合理：客户端路由跳转使用window.location.href的整页刷新模式，绕开了React Router的客户端路由管理机制，会触发组件全量重复挂载，放大所有逻辑漏洞。

• 完全移除App.js中存在问题的全局useEffect逻辑，同时删除未使用的useSelector、useDispatch引用声明。所有重定向规则统一交给路由层处理，不要在全局组件中编写路径判断类的跳转逻辑。
• 将现有守卫组件重命名为GuestRoute，明确其处理公开路由反向拦截的定位，对应业务规则：已认证用户访问/login、/路径时，自动重定向到/home，未认证用户可正常访问公开路由。组件内部渲染逻辑与现有实现完全一致。
• 新增真正的受保护路由组件PrivateRoute，对应业务规则：未认证用户访问/home这类受保护路径时，自动重定向到/login，已认证用户可正常访问受保护页面：

  // PrivateRoute.js
  import React from 'react'
  import { useSelector } from 'react-redux'
  import { Route, Redirect } from 'react-router-dom'
  
  const PrivateRoute = ({ component: Component, ...rest }) => {
    const authenticated = useSelector((state) => state.user.authenticated)
    return (
      <Route
        {...rest}
        render={(props) => {
          if (!authenticated) {
            return <Redirect to='/login' />
          }
          return <Component {...props} />
        }}
      />
    )
  }
  
  export default PrivateRoute
  

• 修正App.js的路由配置，匹配两类路由的权限规则：

  function App() {
    return (
      <div>
        <Router>
          <Switch>
            {/* 受保护路由：需认证才能访问 */}
            <PrivateRoute exact path='/home' component={HomePage} />
            {/* 公开路由：已认证状态禁止访问 */}
            <GuestRoute exact path='/login' component={LoginPage} />
            <GuestRoute exact path='/' component={LoginPage} />
          </Switch>
        </Router>
      </div>
    )
  }
  

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