Webpack开发服务器 React路由推送状态

Question

我试图让react-router与webpack-dev-server配合使用，但一直收到“无法获取/SOMEURL”错误提示。这是因为webpack-dev-server正在寻找特定的文件，但无法找到它。我希望webpack可以使用react-router而不是自己搜索文件。

我该如何设置呢？

我的grunt：

'webpack-dev-server': {
      options: {
        hot: true,
        port: 8000,
        webpack: webpackDevConfig,
        publicPath: '/assets/',
        contentBase: './<%= pkg.src %>/'
      },

      start: {
        keepAlive: true,
      }
    },

- Mohamed El Mahallawy

Answer 1

使用--history-api-fallback选项来运行webpack-dev-server。这会使用connect-history-api-fallback来提供index.html，如果路径与其他文件不匹配。(这意味着您必须将index.html用作您的HTML页面的文件名。)

- Michelle Tilley

---

最终它总是走到默认路由，而不是我指定的其他路由。 - Mohamed El Mahallawy

这听起来像是路由设置的问题，而不是webpack的问题。你有可以分享的代码吗？ - Michelle Tilley

最终解决方案是使用/#/。 - Mohamed El Mahallawy

好的答案。最好将此配置保存在 webpack.config.js 文件中，只需在 webpack.config.js 中添加 devServer: { historyApiFallback: true } 即可。 - soulmachine

相似的问题，相同的解决方案 另一个SO问题 - pravin

这个可以工作，但不适用于React热加载，请参见此处：https://dev59.com/FZvga4cB1Zd3GeqP7c-g - Marc

Answer 2

对于我来说，我的index文件中有这样的内容：

<script src="./assets/app.js"></script>

不是...而是...

 <script src="/assets/app.js"></script>

看起来历史回退API与我的错误配置发生了竞争。

- ReduxDJ