首先，我正在使用：

  • "react-router"："3.0.2"，

  • browser-sync ": " 2.18.8“，

  • "url-loader"："0.5.7"，

  • "webpack"："1.13.1"，

  • "webpack-dev-middleware"："1.6.1"，

  • "webpack-hot-middleware"："2.12.2"，

  • "material-ui"："0.17.0"，

好吧，现在Webpack HMR只在我编辑作为主要路径一部分的reactjs组件时工作，我的意思是： myurlapp.com/

但是，如果某个组件是另一个路径的一部分，例如： myurlapp.com/form 则重新加载整个应用程序 . 这是为什么？

我的根js是这样的：

import React from 'react';
    import { render } from 'react-dom';
    import { Router, browserHistory } from 'react-router';
    import routes from './routes';
    import injectTapEventPlugin from 'react-tap-event-plugin';
    require('./favicon.ico');
    import './styles.scss';
    import 'font-awesome/css/font-awesome.css';
    import 'flexboxgrid/css/flexboxgrid.css';

    injectTapEventPlugin();

    render(
        <Router routes={routes} history={browserHistory} />, document.getElementById('app')
    );

routes.js是这样的：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import NotFoundPage from './containers/NotFoundPage.js';
import LoginPage from './containers/LoginPage';
import FormPage from './containers/FormPage';
import TablePage from './containers/TablePage';
import Dashboard from './containers/DashboardPage';

export default (
  <Route>
    <Route path="login" component={LoginPage}/>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard}/>
      <Route path="dashboard" component={Dashboard}/>
      <Route path="form" component={FormPage}/>
      <Route path="table" component={TablePage}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Route>
);

顺便说一下，这是webpack的条目：

entry: [
  './src/webpack-public-path',
  'webpack-hot-middleware/client?reload=true',
  './src/index'
],

我应该展示哪些其他代码？这就是我在Chrome开发工具的控制台中看到的内容：
HMR in Dev Tools
，你可以看到，我编辑了Header.js的代码并且更新已经完成（没有重新加载整个应用程序）但是如果我编辑另一个组件，那么是专用于不同于主的路由器/然后整个应用程序是真实的 .

react-router webpack-hmr react-hot-loader