Remix扁平路由在Shopify应用中除index.jsx外均返回404的问题求助

问题描述 #

我正在用Remix开发Shopify应用，没有使用任何第三方路由插件，项目遵循Remix的扁平路由规范。我的目录结构如下：

custom-signs
└── app
    └── routes
        └── app.customisers
            ├── $customiserId.jsx
            ├── index.jsx
            └── new.jsx

目前只有index.jsx能在Shopify开发服务器正常加载，访问/app/customisers/new或者/app/customisers/123时都会返回404错误，这些文件确实存在且命名符合Remix扁平路由规则。

补充信息：

• 未使用任何第三方路由插件
• 其他路由如/app、/auth.login均正常工作
• 看起来Remix未识别到app.customisers下的子路由

附上我的app.jsx代码：

export default function App() {
  const { apiKey } = useLoaderData();
  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home">
          Home
        </Link>
        <Link to="/app/customisers">Customisers</Link>
        <Link to="/app/additional">Additional page</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>
  );
}

export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};

解决方案 #

根据你的描述，最可能的问题是缺少对应的父路由文件且未配置<Outlet />，以下是具体排查和解决步骤：

1. 创建父路由文件并添加Outlet
   Remix的扁平路由规则中，app.customisers目录作为嵌套路由的父容器，需要有一个对应的父路由文件app/routes/app.customisers.jsx（或.tsx），并且该文件必须包含<Outlet />组件，用于渲染子路由的内容。如果没有这个父文件，Remix只会将index.jsx识别为独立路由，而子路由new.jsx和$customiserId.jsx无法找到匹配的父路由，从而返回404。

   创建app.customisers.jsx示例代码：

   import { Outlet } from "@remix-run/react";
   
   export default function AppCustomisers() {
     // 这里可以添加父路由的公共布局，比如面包屑、侧边栏等
     return <Outlet />;
   }
   

2. 清理Remix缓存并重启开发服务器
   有时候Remix开发服务器会缓存旧的路由配置，导致新添加的路由无法被识别。执行以下步骤：

   • 停止当前开发服务器
   • 删除项目根目录下的.remix文件夹（如果存在）
   • 重新运行npm run dev（或对应的启动命令）

3. 验证路由文件的导出规则
   确保$customiserId.jsx和new.jsx都默认导出了路由组件，示例：

   // new.jsx示例
   export default function CustomiserNewPage() {
     return <div>创建新定制器页面</div>;
   }
   

   若未默认导出组件，Remix无法识别该文件为路由模块。

4. 确认Shopify应用的路由配置
   检查shopify.server.js中的appUrl配置，确保基础路径与你的路由匹配（比如https://your-app-url.com/app），避免路由前缀不匹配导致的404。

先尝试第一个解决方案，这是嵌套路由失效最常见的原因，应该能解决你的问题。如果仍有问题，可以逐一排查后续步骤。

内容来源于stack exchange