从NextJS迁移到Remix.run(v2)：路由嵌套配置404问题排查

你遇到的问题核心是对Remix路由命名规则的理解偏差，加上代码里的小语法错误，具体分析和解决方式如下：

1. 路由结构的错误原因 #

Remix的路由路径不是由文件夹嵌套直接决定的，你当前的routes/api/test.tsx对应的路由是/test，而非/api/test——api文件夹只是用来组织文件的容器，不会自动把文件夹名作为路由段的一部分。

2. 两种正确的实现方式 #

方式一：文件夹嵌套路由（推荐用于需要共享布局的场景） #

每个路由段对应一个独立文件夹，内部用route.tsx定义页面：

app
|-> routes
    |-> api
        |-> route.tsx       // 对应路由 /api
        |-> test
            |-> route.tsx   // 对应路由 /api/test

如果需要让/api/test继承/api的布局，在api/route.tsx中添加<Outlet />组件即可，子路由内容会渲染在Outlet的位置。

方式二：文件命名的点语法（适合简单无布局的路由） #

直接用文件名的点分隔符定义嵌套路由：

app
|-> routes
    |-> api.tsx       // 对应路由 /api
    |-> api.test.tsx  // 对应路由 /api/test

3. 代码语法修正 #

你示例中的组件定义有语法错误，正确写法二选一：

// 函数声明式
export default function ApiPage() {
  return <div>api page</div>;
}

// 箭头函数式
export default const ApiPage = () => <div>api page</div>;

内容的提问来源于stack exchange，提问作者Alex G.P.