react刷新页面停留当前页（vue/react项目刷新页面出现404的原因以及解决办法）

背景

问题描述：vue/react项目            ，正常的页面操作跳转
 
  
 
  
 
  
 
  
 
  
 
  ，不会出现404的问题











，但是一旦刷新  
  
  
  
  
  
，就会出现404报错            。

产生原因：我们打开vue/react打包后生成的dist文件夹 
  
  
  
  
  
 ，可以看到只有一个 index.html 文件及一些静态资源


 


 


 


 


 


 ，这个是因为vue/react是单页应用(SPA) 
 
 
 
 
 
，只有一个index.html作为入口文件  
   
   
   
   
   
 ，其它的路由都是通过JS来进行跳转的
 
  
 
  
 
  
 
  
 
  
 
  。

而网页上显示的是静态资源的绝对路径

 

 

 

 

 

 ，虽然浏览器上的url变化了
 

 

 

 

 

 
，但实际上服务器的静态资源是没有更改路径的            ，始终只有index.html这一个入口
 

 
 

 
 

 
 

 
 

 
 

 ，所以刷新就会导致url上的路径和服务器上的资源不匹配











，无法找到静态资源                  ，从而报错404











。（多页应用因为有多个入口文件
 
 
 
 
 
 
 
 
 
 
 
 ，所以不会有这样的问题）  
  
  
  
  
  
。

接下来我们看看服务器上的nginx配置：

server { // 监听80端口 listen 80; // 定义你的站点名称 server_name website.com; // 根据请求 URI 设置配置 location / { // 站点根目录

















，这里为 vue 构建出来的 dist 目录 root /www/dist; // 站点初始页为index.html 或 index.htm index index.html index.htm; } }

根据nginx配置我们可以得出            ，当我们在地址栏输入域名（如www.xxx.com）时
 
  
 
  
 
  
 
  
 
  
 
  ，这时会打开我们 dist 目录下的 index.html 文件











，然后我们再通过页面操作跳转路由进入到 www.xxx.com/login  
  
  
  
  
  
，关键在这里 
  
  
  
  
  
 ，当我们在 www.xxx.com/login 页执行刷新操作


 


 


 


 


 


 ，nginx location 是没有相关配置的 
 
 
 
 
 
，所以就会出现 404 的情况 
  
  
  
  
  
 。

解决办法

法1：将vue/react路由模式由history路由改为hash路由

为什么hash模式下没有问题：

hash路由的原理是onhashchange事件  
   
   
   
   
   
 ，hash模式下

 

 

 

 

 

 ，仅hash符号之前的内容会被包含在http请求中
 

 

 

 

 

 
，如www.xxx.com/#/login            ，hash的值为 #/login
 

 
 

 
 

 
 

 
 

 
 

 ，hash值#/login虽然出现在 url中











，但不会被包括在http请求中                  ，其只会请求www.xxx.com
 
 
 
 
 
 
 
 
 
 
 
 ，对服务端完全没有影响

















，因此改变hash不会重新加载页面            ，即使服务器nginx没有配置location
 
  
 
  
 
  
 
  
 
  
 
  ，也不会返回404错误


 


 


 


 


 


 。

history模式：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法











，它们提供了对浏览器历史记录进行修改的功能  
  
  
  
  
  
，但当它们执行修改时 
  
  
  
  
  
 ，虽然改变了当前的 URL


 


 


 


 


 


 ，但浏览器不会立即向服务器发送请求 
 
 
 
 
 
，因此history模式正常页面操作跳转路由  
   
   
   
   
   
 ，是不会再次发送http资源请求的 
 
 
 
 
 
。但是当刷新的时候

 

 

 

 

 

 ，由于url已经改变
 

 

 

 

 

 
，如www.xxx.com/login会完整地向服务器请求相关资源            ，所以就会造成对应路径的资源找不到
 

 
 

 
 

 
 

 
 

 
 

 ，从而返回404  
   
   
   
   
   
 。

但是使用hash路由











，url上会携带#号标志                  ，且history模式的同步更新浏览器历史记录功能就没有了

 

 

 

 

 

 。

法2：在服务器nginx配置文件里
 
 
 
 
 
 
 
 
 
 
 
 ，添加如下代码

















，再重启nginx            ，刷新网页就OK了

location / { try_files $uri $uri/ @rewrites; index index.html; } location @rewrites { rewrite ^.*$ /index.html last; }

文章参考

https://www.cnblogs.com/echohye/p/16566706.html

https://www.jb51.net/article/256217.htm

https://www.cnblogs.com/ling-yu-amen/p/11533726.html