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

Posted 2023-02-21

【中文标题】React slingshot - 使用反应路由器子路由时，Webpack 热中间件在 hot-update.json 上返回 404

【英文标题】：React slingshot - Webpack hot middleware returning 404 on hot-update.json when using react router sub-routes

【发布时间】：2016-07-06 00:33:12

【问题描述】：

我正在为我的 react/redux 应用程序使用 react slingshot starter 项目。当我使用像/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 更改为 just create 时，它​​不会返回 404。

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

【参考方案1】：

仅出于完整性考虑，任何人在使用旧版本的弹弓时遇到此问题。 issue 75 中也提到了这一点，并通过替换修复了 here：

publicPath: '',

与

publicPath: '/',

在webpack.config.js

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

publicPath: 'dist/',

与

publicPath: '/dist/',

【讨论】：

遇到了类似的问题。我已经有一条以斜线结尾的公共路径。我还通过使用斜线使公共路径 start 来修复它。例如，我有publicPath: 'dist/'，但必须将其更改为publicPath: '/dist/'。

@reduckted 我已经更新了我的答案。感谢您指出这一点。

【参考方案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