Remix Run：带动态ID的路由结合布局使用时失效求助

核心原因 #

你的问题出在父路由_landing.jobs没有配置<Outlet />组件——Remix中子路由的内容必须通过父路由的<Outlet />才能渲染出来，否则访问/jobs/blah时只会显示/jobs的组件内容。

具体解决步骤 #

1. 给_landing.jobs路由添加<Outlet /> #

打开_landing.jobs/route.tsx，引入并添加<Outlet />组件，示例代码如下：

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

export default function JobsRoute() {
  return (
    <div className="jobs-page-container">
      {/* 这里保留你原本的jobs页面内容 */}
      <h1>Jobs列表页</h1>
      {/* 子路由（比如/job/:id）的内容会在这个位置渲染 */}
      <Outlet />
    </div>
  );
}

2. 确认_landing.jobs.$id路由组件导出正确 #

检查_landing.jobs.$id/route.tsx是否正确导出了默认组件，示例：

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

export default function JobDetailRoute() {
  const { id } = useParams();
  return <div>这是ID为{id}的职位详情页</div>;
}

3. 验证路由命名规则 #

你的目录命名_landing.jobs.$id本身符合Remix的文件系统路由规则，对应路径就是/jobs/:id，无需修改目录结构。

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