React slingshot - Webpack 热中间件在 hot-update.json 上返回 404 当使用 React 路由器子路由时

Question

我正在为我的 react/redux 应用程序使用 React slingshot 入门项目。当我使用像 /foo 这样的路由时，热重载效果很好，但我发现热重载在像 /foo/bar 这样的子路由上不起作用。我没有对开箱即用的 webpack 配置文件进行任何更改，可以在此处找到 https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.js

当我有以下路由配置时，我在 CreateOrder 组件上得到 404 GET http://localhost:3004/orders/c344e97ed1fbc2923017.hot-update.json 404 (Not Found)：

<Route path="/" component={App}>
    <Route path="login" component={Login} />
    <Route path="orders" component={OrderPanel} />
    <Route path="orders/create" component={CreateOrder} />
    <Route path="*" component={NotFoundPage} />
</Route>

但是当我将路径从 orders/create 更改为仅创建时，它不会 returns 404。

似乎热更新中间件正试图从 /orders 子路径中获取 hot-update.json？

Answer 1

只是为了完整性和任何使用旧版本的弹弓有这个问题的人。 issue 75 and fixed here 中也提到了这一点，替换为：

publicPath: '',

和

publicPath: '/',

在webpack.config.js

更新：根据 reduckted 的评论，publicPath 必须以斜杠开头和结尾。替换：

publicPath: 'dist/',

和

publicPath: '/dist/',

Answer 2

publicPath 配置对我来说不是问题。如果你正在使用 redux 可以试试这个。

出于某种随机原因，redux-devtools 不允许对我进行热重载。尝试从根组件和 redux compose 配置中删除它。

注意：在您的商店配置中使用带有此配置的 redux devtool 浏览器扩展：window.devToolsExtension ? window.devToolsExtension() : f => f

另外，必读：https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

或尝试热重载 3：示例：https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

React slingshot - Webpack 热中间件在 hot-update.json 上返回 404 当使用 React 路由器子路由时

React slingshot - Webpack hot middleware returning 404 on hot-update.json when using react router sub-routes

webpack

react-router

react-slingshot