RemixJS嵌套路由404求助：React+TypeScript子页面无法加载

针对你遇到的/dashboard/sales访问404问题，按以下步骤排查：

• 确认路由文件位置
  确保dashboard.tsx和dashboard文件夹都位于app/routes目录下，Remix只会自动识别这个目录下的路由文件。如果文件放在其他目录，路由不会被注册。

• 修正父路由组件名称
  React组件要求首字母大写，虽不会直接导致404，但不符合规范且可能引发潜在问题。将父组件定义改为：

  import { Outlet } from "@remix-run/react";
  
  export default function Dashboard() { // 首字母大写
    return (
      <div>
        <h1>Dashboard</h1>
        <Outlet />
      </div>
    );
  }
  

• 检查remix.config.ts配置
  打开项目根目录的remix.config.ts，确认没有手动配置routes选项覆盖自动路由。如果存在自定义routes配置，需手动添加/dashboard/sales的路由规则：

  export default {
    // 其他配置...
    routes(defineRoutes) {
      return defineRoutes((route) => {
        route("/dashboard", "routes/dashboard.tsx", () => {
          route("sales", "routes/dashboard/sales.tsx");
        });
      });
    },
  };
  

  若无自定义路由需求，直接删除routes配置项，让Remix自动识别文件系统路由。

• 重启开发服务器
  Remix开发服务器有时无法自动检测到新的路由文件夹/文件，重启后新路由会被重新注册。

• 验证路径大小写
  确保URL路径/dashboard/sales和文件名sales.tsx大小写一致（Mac/Linux系统区分大小写，Windows不区分），若文件名是Sales.tsx，则需访问/dashboard/Sales。

• 检查Remix版本兼容性
  若使用Remix v2，确保项目初始化时未启用特殊路由模式。v2默认使用文件系统路由，无需额外配置；若从v1升级，需确认remix.config.ts中future.v2_routeConvention已设为true。

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