我如何使用page.js与Svelte和Vite?

Question

我已经建立了一个非常简单的Svelte应用程序。它使用page.js进行路由，并使用Vite作为构建工具。登陆页上有一张加州地图。

当我通过npm run dev在本地运行应用程序时，我可以单击县或使用下拉菜单导航到县页面。

然而，当我用npm run build构建网站时(就像你在netflix上看到的那样)，我不能使用下拉菜单——我得到一个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 = ...一起做硬页面加载，因此您需要确保netflix为所有路由提供index.html文件，以便page库可以接管浏览器中的路由。

此外，您还可以让page本身处理导航，以避免硬页面加载，使其成为真正的SPA。