如何在 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 處理響應。