React Router v7 SPA模式下API路由调用clientAction失败的问题求助

大家好，我最近在React Router v7的SPA模式项目里碰到了一个卡壳的问题，想请各位大佬帮忙分析下！

目前我的项目是基于React Router v7以SPA模式运行的，我写了一个API路由并想用clientAction来处理POST请求。奇怪的是：如果用React Router官方提供的useSubmit钩子来提交请求，能正常触发clientAction并拿到响应；但换成原生fetch API发POST请求时，就直接报错，而且clientAction里的日志完全没打出来，说明这个方法根本没被执行到。

具体的错误表现有两个：

• 控制台会抛出react-i18next的错误：TypeError: i18n.dir is not a function
• 同时还会出现React Router的错误日志：Error: You made a POST request to "/api-test" but did not provide an action for route "routes/api-test"

我反复检查了clientAction的定义，看起来语法和参数都没问题，但就是触发不了。我怀疑这会不会是React Router v7 SPA模式的特有限制？但翻遍官方文档也没找到相关说明，实在卡在这里没头绪了，想请各位给点排查方向！

下面是我的相关代码：

组件代码（app/projects/test/route.tsx） #

export default function Component() {
  return (
    <>
      <Button
        onPress={() => {
          void fetch(`/api-test`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ message: "Hello, world!" }),
          });
        }}
      >
        {"Validate Data"}
      </Button>
    </>
  );
}

API路由代码（api-test/route.ts） #

import type { ClientActionFunctionArgs } from "react-router";

export async function clientAction({ request }: ClientActionFunctionArgs) {
  console.log("Received request:", request);
  const body = await request.json();
  console.log("Received request body:", body);
  return Response.json({
    message: "Hello, world!",
    received: body,
    success: true,
  });
}

有没有大佬遇到过类似的问题？或者清楚React Router v7中clientAction的触发条件？麻烦指点一下，谢谢啦！

内容来源于stack exchange