react-router-dom动态路由跳转错误页：loader函数返回值异常排查

核心问题分析 #

你遇到的路由跳错误页问题，本质是programViewLoader函数没有返回react-router-dom预期的有效数据——即便console.log能打印数据，只要loader未正确return结果，react-router会判定该路由无法正常加载，进而触发错误路由。

常见错误原因及修复方案 #

1. 异步操作未正确处理（最常见）

如果你的loader包含异步请求（比如从数据库/接口拿数据），大概率是没使用await等待异步结果，或者用了.then()但没把数据return出去。

错误示例：

import Cookies from "js-cookie";

export async function programViewLoader({ params }) {
  const token = Cookies.get('token');
  // 用了.then()但内部的return不会作为loader的返回值
  fetch(`/api/programs/${params.programID}`, {
    headers: { Authorization: token }
  })
  .then(res => res.json())
  .then(data => {
    console.log(data); // 能打印，但loader最终return undefined
  });
}

修复方案：改用async/await语法，确保显式return数据：

import Cookies from "js-cookie";

export async function programViewLoader({ params }) {
  const token = Cookies.get('token');
  try {
    const res = await fetch(`/api/programs/${params.programID}`, {
      headers: { Authorization: `Bearer ${token}` } // 注意接口要求的认证格式
    });
    
    if (!res.ok) {
      throw new Error(`请求失败：${res.status}`);
    }
    
    const data = await res.json();
    console.log(data);
    return data; // 关键：明确返回数据给loader
  } catch (err) {
    // 抛出错误，让react-router的errorElement捕获处理
    throw err;
  }
}

2. 忘记显式return数据

如果你的loader是同步函数，或者异步操作已经处理，但最后没写return data;，函数会默认返回undefined，react-router同样会判定加载失败。

检查loader函数最后是否有明确的return语句，确保返回的是你拿到的有效数据。

3. 返回了不可序列化的数据

react-router要求loader返回可JSON序列化的数据（不能包含函数、Symbol、循环引用对象等）。如果你的data里有这类内容，即便console.log能打印，也无法被react-router正常处理。

解决方案：过滤掉不可序列化的字段，比如：

// 只保留可序列化的核心字段
return {
  id: data.id,
  name: data.name,
  description: data.description
};

额外路由配置检查 #

确认你的动态路由是作为/programs的子路由配置的，因为只有<Programs/>渲染了Outlet，子路由才能正确匹配：

const router = createBrowserRouter([
  {
    path: '/programs',
    element: <Programs />,
    children: [
      // 其他子路由
      {
        path: 'myprograms/:programID',
        element: <ProgramView />,
        loader: programViewLoader
      }
    ]
  },
  {
    path: '*',
    element: <ErrorPage /> // 错误路由
  }
]);

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