Remix项目嵌套路由无法访问，add/edit/delete路径报404错误求助

针对你遇到的/example/add、/example/edit/2等路径返回404的问题，核心原因是父路由未渲染子路由出口（Outlet），结合Remix v2的路由规则，具体解决步骤如下：

1. 给父路由添加Outlet组件 #

你的routes/example/index.tsx是/example路径的父路由组件，所有子路由（如add、edit.$id）的内容需要通过父路由的<Outlet />来渲染。修改该文件，导入并添加Outlet：

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

export default function ExamplePage() {
  return (
    <div>
      {/* 原有内容保留 */}
      <h1>Example主页</h1>
      {/* 必须添加这一行，用于渲染子路由内容 */}
      <Outlet />
    </div>
  );
}

如果父路由没有Outlet，Remix无法匹配到子路由路径，直接返回404。

2. 检查remix.config.js配置 #

确保你的项目没有自定义路由配置覆盖自动生成的文件系统路由：
打开remix.config.js，确认没有routes字段（或者该字段未手动定义路由规则）。示例正确配置：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  // 移除或注释掉自定义routes配置，让Remix自动识别文件系统路由
  // routes: async (defineRoutes) => defineRoutes(() => {}),
};

如果存在自定义routes配置，需要手动添加子路由规则，否则自动生成的路由会被覆盖。

3. 重启开发服务器 #

修改路由结构或配置后，需要重启Remix开发服务器，确保新路由被正确识别。

完成以上步骤后，/example/add、/example/edit/2等路径应该可以正常访问。

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