React Router v6结合useRoutes钩子实现嵌套路由懒加载异常问题

看起来你在React Router v6里配置嵌套懒加载路由的时候踩了几个常见的坑，我来帮你一步步排查和解决：

1. 懒加载模块的导出格式不匹配 #

React Router v6的路由lazy配置默认会去寻找模块的default导出，但你目前所有组件都是用export const Component的命名导出方式，这就导致React Router找不到要渲染的目标组件，自然无法正常工作。

解决方式有两种，选一个适合你的：

• 把组件改成default导出，比如在ProfilesList.tsx里：

const Component = () => {
  // 组件逻辑
}
export default Component;

• 或者在lazy回调里手动指定要导入的命名导出组件，这种方式不用修改现有组件的导出结构：

// 比如在root.tsx里的修改
lazy: () => import("./profiles/Profiles.tsx").then(mod => ({ Component: mod.Component })),
// 以及Profiles.tsx里useRoutes的配置
lazy: () => import("./ProfilesList").then(mod => ({ Component: mod.Component })),

2. useRoutes的相对路径配置错误 #

你在Profiles.tsx的useRoutes里写的路径是"/"和"/:id"，但这里的路径是相对于当前组件的父路由路径的。因为父路由是/profiles/*，当前组件对应的基础路径是/profiles，你写的"/"会匹配/profiles/（带斜杠结尾），而不是预期的/profiles，这会导致访问根嵌套路由时匹配不到组件。

正确的写法是用不带开头斜杠的相对路径：

return useRoutes([
  {
    path: "", // 对应路由 /profiles
    lazy: () => import("./ProfilesList").then(mod => ({ Component: mod.Component })),
  },
  {
    path: ":id", // 对应路由 /profiles/:id
    lazy: () => import("./ProfileDetail").then(mod => ({ Component: mod.Component })),
  },
])

3. 缺少Suspense组件处理懒加载状态 #

懒加载组件在加载过程中需要React的<Suspense>组件来处理等待状态，如果没有添加，可能会直接抛出错误或者不渲染内容。

你可以在父布局或者当前组件里添加Suspense，比如在AuthLayout里：

import { Suspense, Outlet } from 'react';

const AuthLayout = () => {
  return (
    <div className="auth-layout">
      {/* 你的布局头部、侧边栏等内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Outlet />
      </Suspense>
    </div>
  )
}

或者直接在Profiles.tsx里包裹useRoutes的返回值：

export const Component = () => {
  const childRoutes = useRoutes([
    // 路由配置
  ]);

  return <Suspense fallback={<div>加载中...</div>}>{childRoutes}</Suspense>;
};

4. 检查拼写错误 #

我注意到你代码里把Profiles.tsx写成了Prfiles.tsx，虽然大概率是笔误，但实际开发中这种拼写错误会直接导致导入失败，记得核对所有文件名和导入路径的拼写。

整合修改后的示例代码 #

root.tsx的路由配置

createBrowserRouter([
  {
    path: "/",
    element: <AuthLayout />,
    children: [
      {
        path: "/profiles/*",
        lazy: () => import("./profiles/Profiles.tsx").then(mod => ({ Component: mod.Component })),
      },
    ],
  },
])

Profiles.tsx的内容

import { useRoutes, Suspense } from 'react-router-dom';

export const Component = () => {
  const childRoutes = useRoutes([
    {
      path: "",
      lazy: () => import("./ProfilesList").then(mod => ({ Component: mod.Component })),
    },
    {
      path: ":id",
      lazy: () => import("./ProfileDetail").then(mod => ({ Component: mod.Component })),
    },
  ]);

  return <Suspense fallback={<div>加载中...</div>}>{childRoutes}</Suspense>;
};

这样调整之后，你的嵌套懒加载路由应该就能正常工作了。

备注：内容来源于stack exchange，提问作者Allan Konečný