如何在Remix中为根路径"/"路由设置子路由以兼容React Router结构

要在Remix中实现和原React Router应用一致的嵌套路由结构，需要调整路由文件的组织方式——利用Remix的布局路由（Layout Routes）来替代原React Router中的根路由承载组件，具体步骤如下：

1. 创建布局路由文件 #

新建app/routes/_root.tsx（文件名前的下划线表示这是一个不生成独立路径的布局路由），用来承载原MainComponent并渲染Remix的<Outlet>（替代React Router的Outlet）：

import { Outlet } from "@remix-run/react";
import { MainComponent } from "../components";

export default function RootLayout() {
  // 将MainComponent作为布局容器，内部用Outlet渲染子路由内容
  return <MainComponent>{<Outlet />}</MainComponent>;
}

注意：需要修改你的MainComponent，把原来的React Router Outlet替换成Remix的Outlet（从@remix-run/react导入），或者直接把Outlet作为子元素传入（如上面的代码所示）。

2. 配置根路径的默认子路由 #

将原app/routes/index.tsx移动到app/routes/_root/index.tsx，作为布局路由的索引路由，负责渲染MainHeader：

import { MainHeader } from "../../components";

export default function IndexRoute() {
  return <MainHeader />;
}

此时访问根路径/时，Remix会渲染_root.tsx的布局，同时在Outlet中加载_root/index.tsx的MainHeader，和原React Router的默认行为一致。

3. 配置动态子路由 #

将原app/routes/$id.tsx移动到app/routes/_root/$id.tsx，作为布局路由的子路由，负责渲染AnotherHeader：

import { AnotherHeader } from "../../components";

export default function DynamicIdRoute() {
  return <AnotherHeader />;
}

现在访问动态路径/:id时，Remix会渲染_root.tsx的MainComponent布局，同时在Outlet中加载_root/$id.tsx的AnotherHeader，实现嵌套渲染的效果。

最终路由结构 #

调整后的路由文件结构如下：

app/routes/
├── _root/
│   ├── index.tsx       # 对应路径 /
│   └── $id.tsx         # 对应路径 /:id
└── _root.tsx           # 布局路由，无独立路径

这样的结构完全复刻了原React Router中根路由承载容器、子路由渲染内容的逻辑，同时符合Remix的路由规则。

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