共计 704 个字符,预计需要花费 2 分钟才能阅读完成。
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]