重新加载开发中的 ReactJS 页面 returns 我一片空白

Question

每当我在 ReactJS 开发过程中单击浏览器上的 'reload' 按钮时，我的页面就会变成空白，我必须返回基础 URL 并重新开始。我可以知道我可以做些什么来保留某种 'history' 吗？

我正在使用 React-Router v4

webpack.config.js

devServer: {
    historyApiFallback: {
        disableDotRule: true,
        index: 'build/index.html
    }
}

我的 devServer 没有输出属性，只有在 prodConfig:

output: {
    path: path.join(_dirname, '/build'),
    filename: '[name].[hash].bundle.js',
    publicPath: '/work/'
}

/
- src
    - index.html
- webconfig.js

干杯。

*编辑：添加了 webpack 代码片段

Answer 1

如果你正在使用 webpack，你可以像这样设置 devServer 的 historyApiFallback 属性：

devServer: {
    historyApiFallback: true
},

或像这样（假设 index.html 位于您的构建目录中）：

devServer: {
    historyApiFallback:{
        index:'build/index.html'
    },
},

更改 'build/index.html' 以指向正确的 index.html 路径。

或者，当你运行你的package.json中的脚本时直接设置它，像这样：

"scripts": {
  "start" : "webpack-dev-server --history-api-fallback"
},

看看webpack的官方文档here and here。

Reload ReactJS page in development returns me blank