单页面应用程序(SPA)
通常使用一个web浏览器可以访问的索引文件,比如index.html
,然后,在HTML5 History API
的帮助下(react-router就是基于History API
实现的),借助JavaScript
处理应用程序中的导航。当用户单击刷新按钮或直接通过输入地址的方式访问页面时,会出现找不到页面的问题,因为这两种方式都绕开了History API
,而我们的请求又找不到后端对应的路由,页面返回404错误。
connect-history-api-fallback
中间件很好的解决了这个问题。具体来说,每当出现符合以下条件的请求时,它将把请求定位到你指定的索引文件(默认为/index.html
)。
请求是Get
请求
请求的Content-Type
类型是text/html
类型
不是直接的文件请求,即所请求的路径不包含.
(点)字符
不匹配option
参数中提供的模式
使用方法
- 安装
connect-history-api-fallback
npm install --save connect-history-api-fallback
- 在
express
的app.js
中
var express = require('express');
var app = express();
const history = require('connect-history-api-fallback')
app.use(history());
注意:需写在这个前面
app.use(express.static(path.join(__dirname, 'public')));