SPA页面刷新时出现Cannot GET错误，如何配置当前页面刷新逻辑？

问题原因 #

SPA的前端路由通过history.pushState在浏览器端实现页面切换，并没有真正向服务器请求对应路径的文件。当用户刷新页面时，浏览器会直接向服务器发送GET /Garage或GET /Winners的请求，但服务器上不存在这些路径的文件，因此返回404错误。

解决步骤 #

1. 配置Netlify服务器重写规则 #

因为你的应用部署在Netlify，需要让所有请求都指向SPA的入口文件（通常是index.html），由前端路由处理路径匹配。

方法一：创建_redirects文件

在项目根目录新建名为_redirects的文件，添加以下内容：

/*    /index.html   200

这个规则表示所有路径的请求都重定向到index.html，并返回200状态码，确保服务器不会返回404，而是交给前端路由处理。

方法二：使用netlify.toml配置

如果项目中已有netlify.toml，添加以下配置：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

2. 前端路由代码优化 #

修正load事件绑定

你的代码中window.addEventListener('load', router())会立即执行router函数，而不是在load事件触发时执行，应改为：

window.addEventListener('load', router)

补充根路径路由匹配

为了让根路径/也能正确匹配到Garage页面，在路由数组中添加根路径的配置：

const routes = [
    { path: '/', view: garage },
    { path: '/Garage', view: garage },
    { path: '/Winners', view: winners },
]

完成以上配置后，重新部署项目到Netlify，刷新/Garage或/Winners页面就不会再出现Cannot GET的错误了。

内容的提问来源于stack exchange，提问作者DaroGawlik