React Router 7+框架模式下如何为单个带loader/action的组件配置多路由

嘿，我明白你遇到的问题了——在React Router 7+的框架模式里，直接重复挂载同一个路由文件确实不会生效，因为框架模式在处理路由模块时会做去重或合并处理，重复引用同一个文件只会生成一个路由条目。不过有几个简单的办法能完美解决这个需求：

方法一：创建路由别名文件（推荐） #

这个办法改动最小，完全不需要修改你现有的MyPage.tsx代码，只需要给它建两个“空壳”路由文件就行：

1. 在你的routes目录下新建两个空文件：

   • routes/Name1.tsx
   • routes/Name2.tsx

2. 在这两个空文件里，直接导出MyPage.tsx的所有内容：

   // routes/Name1.tsx
   export * from "./MyPage";
   export { default } from "./MyPage";
   

   // routes/Name2.tsx
   export * from "./MyPage";
   export { default } from "./MyPage";
   

3. 最后在你的路由配置里，分别指向这两个别名文件：

   export default [
     route("/name1", "./routes/Name1.tsx"),
     route("/name2", "./routes/Name2.tsx"),
   ] satisfies RouteConfig;
   

这样React Router会把这两个当成独立的路由模块，但实际复用了同一个组件、loader和action，完全符合你的需求，而且后续修改MyPage.tsx的内容时，两个路由会自动同步更新，不用额外维护。

方法二：手动在路由配置中绑定资源 #

如果你不想多建文件，也可以直接在路由配置里手动导入组件、loader和action，然后分别绑定到两个路由上：

// 你的路由配置文件
import MyPage, { loader as myPageLoader, action as myPageAction } from "./routes/MyPage";

export default [
  route("/name1", {
    element: <MyPage />,
    loader: myPageLoader,
    action: myPageAction,
    // 如果MyPage还有meta等其他导出，也要在这里手动绑定，比如meta: myPageMeta
  }),
  route("/name2", {
    element: <MyPage />,
    loader: myPageLoader,
    action: myPageAction,
    // 同步绑定其他导出内容
  }),
] satisfies RouteConfig;

这种方式的好处是不用新增文件，但缺点是后续如果MyPage.tsx新增了其他路由相关的导出（比如meta、shouldRevalidate），你需要手动在两个路由配置里同步添加，维护成本会高一点。

总的来说，第一种方法更适合追求简单、低维护成本的场景，也是社区里最常用的解决方案。

内容来源于stack exchange