Remix v2路由命名规范下Outlet无法正常显示问题排查

路由结构 #

routes/project.jsx
routes/project.$projectId.jsx
routes/project.$projectId.register.jsx

各文件代码 #

project.jsx #

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

export default function Project() {
  return (
    <>
      <div>project</div>
      <Outlet />
    </>
  );
}

project.$projectId.jsx #

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

export default function Project() {
  return (
    <>
      <div>projectId</div>
      <Outlet />
    </>
  );
}

project.$projectId.register.jsx #

export default function Register() {
  return (
    <div>register</div>
  );
}

问题描述 #

访问 http://localhost:3000/project/any-id-would-suit/register 时，预期页面显示：

project
projectId
register

但实际仅显示：

register

补充配置（remix.config.js） #

module.exports = {
  future: {
    v2_meta: true,
    v2_routeConvention: true,
  },
  devServerPort: 8002,
};

问题原因 #

你开启了Remix的v2_routeConvention路由约定，在v2规则下，原文件名无法正确识别嵌套关系：
project.$projectId.register.jsx 会被解析为独立路由 /project/:projectId/register，但并未与project.$projectId.jsx建立嵌套关联——v2要求父路由文件名后需加下划线_来标识子路由归属，或改用文件夹结构组织嵌套路由。

解决方案 #

有两种可行修改方式：

方式一：修改文件名（保持扁平结构） #

将子路由文件名改为 project.$projectId_.register.jsx（在$projectId后添加下划线），修改后的路由结构：

routes/project.jsx
routes/project.$projectId.jsx
routes/project.$projectId_.register.jsx

下划线_会告知Remix该文件是project.$projectId.jsx的子路由，从而触发正确的嵌套渲染。

方式二：改用文件夹结构（更直观） #

重新组织路由文件为嵌套文件夹结构：

routes/
  project.jsx
  project/
    $projectId.jsx
    $projectId/
      register.jsx

这种方式符合v2路由约定的直观嵌套逻辑，无需额外下划线标识。

修改后重启开发服务器，访问原URL即可看到预期的三层内容。

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