React使用Provider实现路由保护时更新深度超限警告的解决方法

你的代码触发Maximum update depth exceeded警告的核心原因是路由跳转逻辑形成闭环：

• 未登录时，组件最外层直接返回跳转至/login，但当前路由配置中没有启用/login路由，导致兜底路由触发跳转至/app。
• 跳转至/app后，组件再次检测到未登录，又跳转回/login，往复循环引发无限更新。

同时，路由内部的else分支逻辑错误，未登录时不应跳转至需要认证的/app，而是显示登录相关路由。

修改后的代码及步骤 #

1. 修正index.tsx逻辑

移除组件外层的强制跳转判断，重新梳理路由的认证规则：

import React, { useContext } from 'react';
import { MainLayout } from '../containers/layout';
import { Route, Routes, Navigate } from 'react-router-dom';
import { Home } from '../containers/views/home/home';
import Login from '../containers/views/login/login';
import ForgotPassword from '../containers/views/forgotpassword/forgotpassword';
import SetNewPaasword from '../containers/views/setnewpassword/setnewpassword';
import CheckMail from '../containers/views/checkmail/checkmail';
import { AuthLayout } from '../containers/layout';
import UserList from '../containers/views/user/userList';
import CustomerList from '../containers/views/customer/customerlist';
import MasterView from '../containers/views/master/MasterView';
import { LayoutProvider } from '../context/layoutcontext';
import LoanList from '../containers/views/loan/LoanList';
import OfferCustomerList from '../containers/views/offers/offerCustomerList';
import { AuthContext } from '../context/authcontext';

const Index = () => {
  const { isAuthenticated } = useContext(AuthContext);

  return (
    <LayoutProvider>
      <Routes>
        {/* 已认证用户的受保护路由 */}
        {isAuthenticated ? (
          <>
            <Route path='/app' element={<MainLayout />}>
              <Route index element={<Home />} />
              <Route path='admin' element={<MasterView />} />
              <Route path='user' element={<UserList />} />
              <Route path='customer' element={<CustomerList />} />
              <Route path='transaction' element={<LoanList />} />
              <Route path='offers' element={<OfferCustomerList />} />
            </Route>
            {/* 已认证用户访问登录页自动跳转到主页 */}
            <Route path='/login' element={<Navigate to='/app' replace />} />
          </>
        ) : (
          <>
            {/* 未认证用户的登录路由 */}
            <Route path='/login' element={<Login />} />
            {/* 未认证用户访问受保护路由自动跳转到登录页 */}
            <Route path='/app/*' element={<Navigate to='/login' replace />} />
          </>
        )}

        {/* 无需认证的公共路由 */}
        <Route path='/auth' element={<AuthLayout />} />
        <Route path='/forgotpassword' element={<ForgotPassword />} />
        <Route path='/checkmail' element={<CheckMail />} />
        <Route path='/setnewpassword' element={<SetNewPaasword />} />
        {/* 兜底路由：根据认证状态跳转 */}
        <Route path='*' element={isAuthenticated ? <Navigate to='/app' replace /> : <Navigate to='/login' replace />} />
      </Routes>
    </LayoutProvider>
  );
};

export default Index;

2. 可选优化：封装受保护路由组件

为了让路由逻辑更清晰，可以把认证判断封装成独立组件：

// ProtectedRoute.tsx
import { Navigate, Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { AuthContext } from '../context/authcontext';

export const ProtectedRoute = () => {
  const { isAuthenticated } = useContext(AuthContext);
  return isAuthenticated ? <Outlet /> : <Navigate to='/login' replace />;
};

之后在Index组件中替换原有的受保护路由逻辑：

<Route element={<ProtectedRoute />}>
  <Route path='/app' element={<MainLayout />}>
    {/* 子路由内容不变 */}
  </Route>
</Route>

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