乐趣区

# react-router v4 刷新出现找不到页面(NO FOUND)解决方案

react-router v4 刷新页面出现找不到问题解决方案
原因
### 浏览器被刷新相当于重新请求了服务端的 page 接口, 当后端没有这个接口时, 就没有 document 文档返回, 这时 url 并没有被 js 观察处理

解决

如果是使用 webpack-dev-server, 请将 historyApiFallback: true 这个配置加入至 devServer 中. 以及在 output 中配置 publicPath: ‘/’
如果是使用自定义的 node 服务器的话, 需自己手写一个 404 接口. 将所有的 url 都返回到 index.html 文档

实例

koa
const koaWebpack = require(‘koa-webpack’);

async startService() {
const middleware = await koaWebpack({config: this.webpackConfig});

this.app.use(middleware);

app.use(async ctx => {
const filename = path.resolve(this.webpackConfig.output.path, ‘index.html’);
ctx.response.type = ‘html’;
ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(
filename
);
});

this.app.listen(this.port, () => {
console.log(` 当前服务器已启动 `, `http://${this.host}:${this.port}`);
});
}

[参考地址][1]

退出移动版