普及基本概念 Q&A

为什么会404 ？

原因很简单：当你刷新时，你首先是根据url访问的服务器资源地址，然后返回的页面内加载了对应资源，最后在浏览器进行渲染；也就是说如果这个时候报404，是因为你后台并没有针对这个路由给出返回HTML内容，也谈不上执行React Router了。

简单来说就是，没在服务器对应url路径匹配到你需要的资源

为什么不刷新就不会404，不是说服务器根据你这个路径找不到对应资源吗？

你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。

为什么 hashRouter 可以，historyRouter 不行？

React是属于单页应用（single-page application）

而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html。当我们在地址栏输入 www.xxx.com 时，这时会打开我们 nginx 配置的目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login

关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有根据这路径做相关的资源返回配置的，所以就会出现 404 的情况

hashRouter

router hash 模式我们都知道是用符号#表示的，如 www.xxx.com/#/login, hash 的值为 #/login。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 www.xxx.com/#/login 只有 www.xxx.com 会被包含在请求中，因此对于服务端来说，即使没有配置location，也不会返回404错误

解决方案

好，说了那么多，现在就阐述解决方案 以下示例为宝塔面板

配置伪静态资源

第一步找到配置项入口

第二步 进行伪静态配置

location / {
    try_files $uri $uri/ @router;
    index  index.html;
}

location @router{
      rewrite ^.*$ /index.html last;
}

第三步 重启服务器即可

其他解决

可以使用文头所说的方法

将 historyRouter 变为 hashRouter （治标不治本）
配置无论任何路径，都返回index.html，剩下的事情交给React Router

只不过我对于第二种方法一直配置不生效

以上便是这篇文章的全部内容啦

最后

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程，期待你的关注~

最近发文计划为Webpack 以及性能优化知识体系

同时也可扫码关注我的公众号：Smooth前端成长记录，公众号同步更新

一文理解配置伪静态解决 部署项目刷新页面404问题