Remix项目嵌套路由报错：所有路由均要求提供loader

错误提示 #

'You made a GET request to "/" but did not provide a loader for route "routes/Banking", so there is no way to handle the request.'

当前项目配置 #

root.tsx #

import type { LinksFunction } from "@remix-run/node";
import { Links, LiveReload, Outlet } from "@remix-run/react";

import stylesheet from "./tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

export default function Root() {
  return (
    <html lang="en">
      <head>
        <Links />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
      </head>
      <body>
          <Outlet />
          <LiveReload />
      </body>
    </html>
  );
}

routes/index.tsx #

import { Outlet } from "@remix-run/react"
import { Navbar } from "~/routes/navbar/navbar"

export const Index = () => {
    return (
        <>
           <Navbar />
           <Outlet />
        </>
    )
}

remix.config.js #

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  serverModuleFormat: "cjs",
  future: {
    v2_dev: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

已尝试操作 #

• 将v2_routeConvention设置为false
• 切换使用index.tsx和_index.tsx命名文件

解决方案 #

1. 修正Banking路由的命名与位置 #

错误指向routes/Banking，说明Remix将其识别为/路径的处理路由，需按规范调整：

• 若Banking是对应/banking的独立路由：在V2路由约定下，命名为routes/banking.tsx或routes/banking/index.tsx；旧约定用routes/banking.tsx。
• 若Banking是布局路由（仅提供嵌套Outlet）：V2约定下文件名改为_banking.tsx（下划线前缀标记布局，不要求loader）。
• 若Banking是index.tsx的子路由：移至routes/index/目录下，如routes/index/banking.tsx，对应路径/banking。

2. 添加空loader（临时适配） #

若需保留Banking路由处理/请求，且无需加载数据，直接添加空loader：

// routes/Banking.tsx 或对应文件
export async function loader() {
  return null;
}

3. 排查路由冲突 #

确认无多个路由文件匹配/路径，比如同时存在routes/index.tsx和routes/Banking.tsx导致优先级冲突，Remix优先选择Banking但它缺少loader。

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