苗条的路线给了我 404

Question

我在 Svelte 中为我的应用程序创建了一个简单的路由器。如果我从导航栏访问 link，它就可以工作。如果我重新加载页面，它会给我 404.. 为什么？

<Router url="{url}">
 <nav>
   <Link to="/">Home</Link>
   <Link to="charts">About</Link>
 </nav>
 <div>
  <Route path="charts" component="{About}" />
  <Route path="/"><Home /></Route>
 </div>
</Router>

重新加载后： This localhost page can't found 找不到网页地址：http://localhost:5000/charts

Answer 1

首先，我们无法访问您的 link，因为它是本地 link，只能从您的本地计算机访问。

但是我敢打赌这是一个重定向问题。您正在尝试访问您服务器上的 chart 文件，该文件可能不存在，因为您的路由器应该执行该工作。

您需要配置您的服务器，以便每个路由都重定向到您的索引文件，然后路由器将能够通过分析 url.

来完成它的工作

Answer 2

您必须确保您的服务器为每个路由路径提供 index.html 服务，而不仅仅是 /。

如果你将 sirv 与 Svelte 入门项目之一一起使用，您可以将 --single 标志添加到脚本中。

"scripts": {
  "start": "sirv public --single",
  "start:dev": "sirv public --dev --single"
},

Answer 3

如以上评论之一所述，如果使用汇总，调用 npm run dev

时将使用以下脚本组合

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  }

Answer 4

这适用于那些想要托管 svelte 应用程序的人，如果您的托管服务提供商支持添加重定向或重写规则，然后您可以执行此操作来为路由器可以处理的任何请求提供 index.html。

例如， source设置为/*，/指路径，通配符*指匹配任意请求路径。

然后将您的目的地设置为 / 就是这样。不要将目标设置为 /index.html，否则所有请求都会打开您的主页，例如，如果您尝试打开 www.example.com/about，那么它将打开 www.example.com/index.html

并将操作设置为 Rewrite 而不是 Redirect

这也解决了刷新站点和直接从浏览器打开URL的问题

Answer 5

改变
“开始”：“sirv public --no-clear

对此 “开始”：“sirv public -s --no-clear”

在您的 package.json 文件中 , 它对我有用

苗条的路线给了我 404

Svelte route gives me 404

javascript

user-interface

routing

svelte