React Loader v6：如何阻止子加载器执行？

问题核心在于React Router的加载器(loader)会在路由匹配后立即执行，不受父组件的权限判断逻辑影响——哪怕你的PrivateRoutes组件还没渲染Outlet，子路由的loader已经跑完了，所以才会出现未认证时加载器抛401的情况。

最优解决方法：父路由加载器统一做认证拦截 #

把认证逻辑移到父路由的loader中，利用React Router的加载器执行顺序（父路由loader先于所有子路由loader运行），在子路由加载敏感数据前就完成认证检查，未通过则直接重定向，从根源阻止子加载器执行。

修改后的代码示例：

import { redirect, createBrowserRouter } from 'react-router-dom';

// 父路由的认证加载器
const authLoader = async () => {
  if (!isAuthenticated()) {
    // 未认证则重定向到登录页
    return redirect('/auth/signin');
  }
  // 认证通过，返回null让路由继续执行
  return null;
};

const PrivateRoutes = () => {
  return <Outlet />; // 保留组件作为状态变化时的双重保障
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <PrivateRoutes />,
    loader: authLoader, // 给父路由添加认证加载器
    children: [
      {
        path: '',
        loader: async () => {
          // 仅认证通过后才会执行到这里
          return { data: await getSensitiveData() };
        },
        element: <SensitiveDataHome />,
        children: [
          {
             path: '',
             index: true,
             element: <SensitiveDataDeeplyNestedElement />
          }
        ]
      },
    ]
  }
]);

补充说明 #

• 原有的PrivateRoutes组件可以保留，当用户在页面中出现认证状态变更（比如token过期）时，组件能即时检测并跳转，和父路由loader形成双重拦截。
• 如果有多个敏感路由分支，都可以挂载到这个带authLoader的父路由下，实现统一的权限控制，无需每个子路由重复写认证逻辑。

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