在开发中重新加载ReactJS页面使我空白

Question

在ReactJS开发期间，每当我单击浏览器上的“重新加载”按钮时，我的页面就会变成空白，并且我必须返回到基本URL并重新开始。我可以知道如何保持某种“历史”吗？

我正在使用React-Router v4

webpack.config.js

zu = df.loc[df['Code'] == 'ZU'].set_index('ID')['Quantity']
zo = df.loc[df['Code'] == 'ZO'].set_index('ID')['Quantity']

res = (zu / zo).dropna().reset_index()

print(res)

    ID    Quantity
0  400  416.666667
1  401  600.000000

我的devServer没有输出属性，仅在prodConfig中：

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

目录：

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

干杯。

*编辑：添加了Webpack代码段

Answer 1

如果您使用的是webpack，则可以这样设置historyApiFallback的{​​{1}}属性：

devServer

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

devServer: {
    historyApiFallback: true
},

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

或者，在devServer: { historyApiFallback:{ index:'build/index.html' }, }, 中运行脚本时直接进行设置，如下所示：

package.json

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