如何在 NextJS 中使用 next/link 调用链接 api 路由时修复 net::ERR_ABORTED 404（未找到）

Question

我创建了一个 api 路由来下载 CSV 文件，并且在使用 Next Link 时出现此错误。 我不能只是切换到，因为那样我的应用程序将无法构建，所以我的双手被束缚了。 组件很简单

const DownloadCsvPage = () => {
  return (
    <section className="w-full h-screen grid place-content-center">
      <Link href="/api/db-to-csv">
        <a className="px-20 py-9 border text-black no-underline">
          Download CSV
        </a>
      </Link>
    </section>
  );
};

我试图按照这篇文章https://www.loudnoises.us/solving-next-static-pages-js-404-not-found/但将 href 设置为当前页面路径以及 api 路由的路径仅附加了api 将 url 路由到本地主机，但这并没有触发下载。 喜欢

   <Link href="/download" as="/api/db-to-csv">
        <a className="px-20 py-9 border text-black no-underline">
          Download CSV
        </a>
      </Link>

阅读此解决方案https://exerror.com/js-file-gets-a-neterr_aborted-404-not-found/后，我认为将我要下载的文件移动到公用文件夹可以完成这项工作，但它没有. 谢谢

Answer 1

如果您想调用 API，最好使用普通的 div 标签并添加 onClick 事件处理程序并附加一个函数，该函数将在 fetch 或 axios 的帮助下调用您的 API，在该函数中您可以使用 .then(result)和 .catch(error) 方法来相应地为您的 API 处理响应。