Svelte 路线给了我 404

Question

我在 Svelte 中为我的应用程序创建了一个简单的路由器。 如果我从导航栏访问链接，它就可以工作。 如果我重新加载页面，它会给我 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>

重新加载后：找不到此本地主机页面未找到该网址的网页： http://localhost:5000/charts

Answer 1

如上面的评论之一所述，如果使用汇总，则在调用npm run dev时，以下脚本组合将起作用

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

Answer 2

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

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

您需要配置服务器，以便将每条路由都重定向到索引文件，然后路由器将能够通过分析URL来完成其工作。

Answer 3

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

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

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

Answer 4

这是为那些想要托管 svelte 应用程序的人准备的，如果您的托管服务提供商支持添加重定向或重写规则，那么您可以这样做来为路由器可以处理的任何请求提供index.html服务。

例如，Set source as /* /指路径，通配符*指匹配任意请求路径。

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

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

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

Answer 5

改变
"start": "sirv public --no-clear"

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

在你的 package.json 文件中，它对我有用