单页应用刷新变空白页问题，react-router 使用browserHistory时刷新变空白页

最新推荐文章于 2022-11-04 15:02:07 发布

yaomj1986

最新推荐文章于 2022-11-04 15:02:07 发布

阅读量4.6k

点赞数 2

分类专栏： React

本文链接：https://blog.csdn.net/y523006369/article/details/103816727

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、问题

项目打包部署到服务器上,可以正常跳转,跳转后进行刷新操作会出现页面空白现象。

2、原因查找

查阅网上资料，一般出现这种现象的原因是web单页面开发模式造成的。

现在主流的前端框架基本都是单页面的。如：react、vue等。

单页面简单来说就是访问所有资源路径、其实页面内容只有一个（一般是index.html）。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件（可以理解为页面片段）进行逻辑处理和页面渲染。

所以访问www.xxx.com/xxx/ 其实web站中并没xxx这个页面资源（xxx就是让框架路由用的）。

3、解决方法

（1）使用HashRouter，不使用BrowserRouter

和都可以实现前端路由的功能，区别是前者基于url的pathname段，后者基于hash段。

前者：http://127.0.0.1:3000/article/num1

后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）

这样的区别带来的直接问题就是当处于二级或多级路由状态时，刷新页面，会将当前路由发送到服务器（因为是pathname），而不会（因为是hash段）。

二者的替换方法很简单，我们在引入 react-router-dom 时，如下：

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

将 BrowserRouter 修改为 HashRouter 就可以了。

（2）使用Nginx配置

按网上的说法，加上try_files配置：

location / {
		 ……
		 try_files $uri $uri/ /index.html;
		}

但是，我配置后，仍然无法解决，刷新后还是空白页。
查看浏览器控制台打印信息有报错：

报错：Uncaught SyntaxError: Unexpected token <

看了下加载js文件的路径不对。

我的index.html中 .js 引入路径为相对路径：

<script type="text/javascript" src="./vendor.f8e3e2.js"></script><script type="text/javascript" src="./index.45e9d8.js"></script></body>
<script type="text/javascript">

修改为，绝对路径：

<script type="text/javascript" src="/vendor.f8e3e2.js"></script><script type="text/javascript" src="/index.45e9d8.js"></script></body>
<script type="text/javascript">

测试可以。