React Router 6主页已认证用户重定向触发无限循环，如何处理？

你遇到的无限循环问题，核心原因是直接在组件渲染阶段返回<Navigate>组件。每次组件渲染时，只要userStore.isLoggedIn为true，就会触发导航操作；而导航会引发路由状态更新，进而导致组件再次渲染，再次触发导航，形成无限循环。

下面是几个实际项目中常用的解决方案：

1. 用useEffect包裹导航逻辑 #

把重定向逻辑放到副作用钩子中，确保只在isLoggedIn状态变化时执行一次，避免渲染阶段触发循环：

import { useNavigate, useEffect } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { useStore } from '../stores'; // 根据你的项目路径调整

export default observer(function HomePage() {
    const { userStore } = useStore();
    const navigate = useNavigate();

    useEffect(() => {
        // 仅当登录状态变为true时执行重定向
        if (userStore.isLoggedIn) {
            navigate('/profile', { replace: true });
        }
    }, [userStore.isLoggedIn, navigate]); // 依赖项确保状态变化才触发

    // 已经登录时返回null/loading，避免渲染登录表单
    if (userStore.isLoggedIn) {
        return null;
    }

    return (
        <>
            {/* 你的登录表单代码 */}
        </>
    );
});

2. 在路由配置层面处理重定向 #

把认证重定向逻辑集中到路由配置里，更符合React Router的设计理念，也避免组件内部逻辑冗余：

方式一：条件渲染路由元素 #

import { createBrowserRouter, Navigate } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProfilePage from './pages/ProfilePage';
import { userStore } from '../stores'; // 直接导入store实例

const router = createBrowserRouter([
    {
        path: '/',
        // 直接根据登录状态决定渲染哪个组件
        element: userStore.isLoggedIn ? <Navigate replace to="/profile" /> : <HomePage />,
    },
    {
        path: '/profile',
        element: <ProfilePage />,
    },
]);

export default router;

方式二：使用React Router的Loader #

如果认证逻辑是异步的（比如从本地存储读取状态），用Loader更合适：

import { createBrowserRouter, redirect } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProfilePage from './pages/ProfilePage';
import { userStore } from '../stores';

const router = createBrowserRouter([
    {
        path: '/',
        loader: async () => {
            // 这里可以加入异步认证逻辑，比如检查token有效性
            await userStore.checkAuth();
            if (userStore.isLoggedIn) {
                return redirect('/profile');
            }
            return null;
        },
        element: <HomePage />,
    },
    {
        path: '/profile',
        element: <ProfilePage />,
    },
]);

export default router;

3. 补充注意事项 #

• 确保userStore.isLoggedIn是稳定的状态值，避免因为引用变化（比如每次返回新对象）导致组件频繁重渲染。
• 如果使用Mobx，确保store的状态更新是正确的，避免不必要的状态变更触发重渲染。

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