如何將 page.js 與 Svelte 和 Vite 一起使用？

Question

我已經設置了一個非常簡單的 Svelte 應用程序。 它使用 page.js 進行路由，並使用 Vite 作為構建工具。 着陸頁上有一張加利福尼亞地圖。

當我通過npm run dev在本地運行應用程序時，我可以點擊一個縣或使用下拉菜單導航到縣頁面。

但是，當我使用 npm run build 構建站點時（如您在 Netlify 上所見），我無法使用下拉菜單——我得到 404。如果我嘗試直接轉到縣頁面（例如https： //splendid-yeot-baf72e.netlify.app/county/Colusa ），我也得到了 404。

完整的代碼可以在CodeSandbox上查看（它實際工作的地方，讓這更令人沮喪）

我該如何解決？ 我做了很多搜索，但沒有找到答案。

從 App.svelte 調用路由器：

    <script lang="ts">
      import router from "page";
      import State from "./pages/State.svelte";
      import County from "./pages/County.svelte";

      let page;
      let params;

      router("/", () => (page = State));
      router(
        "/county/:id",
        (ctx, next) => {
          params = ctx.params;
          next();
        },
        () => (page = County)
      );

      router.start();
    </script>

    <div id="center">
      <svelte:component this={page} {params} />
      <main />
    </div>

Answer 1

您的CountrySelect組件使用window.location.href =...執行硬頁面加載，因此您需要確保Netlify 為所有路由提供index.html文件，以便page庫可以接管瀏覽器中的路由。

此外，您還可以讓page本身處理導航以避免硬頁面加載，從而使其成為真正的 SPA。