React-hot-loader几乎在工作，我做错了什么？

Question

我已经设法让webpack流程正常工作，浏览器正在获得热点更新。但由于某些原因，我无法理解模块swaping似乎将不能正常工作......

这是我的index.js：

import { AppContainer } from 'react-hot-loader'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { browserHistory } from 'react-router'; 

import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import thunkMiddleware from 'redux-thunk'; 

import authenticationMiddleware from './middleware/authentication.js'; 
import messageMiddleware from './middleware/navigationMessage.js'; 
import apiMiddleware from './middleware/api.js'; 

import AppRouter from './router.jsx'; 

import RootReducer from './reducers/root-reducer.js'; 

let store = createStore(RootReducer, applyMiddleware(thunkMiddleware, apiMiddleware, messageMiddleware, authenticationMiddleware, routerMiddleware(browserHistory))); 

const history = syncHistoryWithStore(browserHistory, store); 

let rootElement = document.getElementById('app-root'); 
const hotRender = (CurrentAppRouter) => 
    ReactDOM.render(
    <AppContainer> 
     <Provider store={store}> 
     <CurrentAppRouter history={history} /> 
     </Provider> 
    </AppContainer>, 
    rootElement 
); 

hotRender(AppRouter); 

if (module.hot) { 
    module.hot.accept('./router.jsx',() => { 
    hotRender(AppRouter); 
    }); 
} 

Provider.childContextTypes = { 
    store: React.PropTypes.object 
}; 

我在Chrome得到这个在我的控制台：

然而在HTML不是updateing，即使是在我manualy来回浏览并修改才能通过，只有当我manualy重新加载页面做我的变化出现。

我在做什么错了？

UPDATE：

我的依赖关系：

"devDependencies": { 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-object-rest-spread": "^6.20.2", 
    "babel-plugin-transform-react-jsx": "^6.8.0", 
    "babel-plugin-transform-runtime": "^6.15.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-2": "^6.22.0", 
    "eslint": "^3.9.1", 
    "eslint-plugin-react": "^6.6.0", 
    "express": "^4.13.4", 
    "gulp": "^3.9.1", 
    "gulp-concat-css": "^2.3.0", 
    "gulp-sass": "^2.3.2", 
    "json-loader": "^0.5.4", 
    "react-hot-loader": "^3.0.0-beta.6", 
    "webpack": "^2.2.0", 
    "webpack-dev-server": "^2.2.0" 
    }, 
    "dependencies": { 
    "babel-polyfill": "^6.16.0", 
    "babel-runtime": "^6.18.0", 
    "es6-promise": "^4.0.5", 
    "isomorphic-fetch": "^2.2.1", 
    "jwt-decode": "^2.1.0", 
    "mobile-detect": "^1.3.3", 
    "raven": "^1.1.1", 
    "raven-js": "^3.9.1", 
    "react": "^15.4.2", 
    "react-bootstrap": "^0.30.6", 
    "react-dom": "^15.4.2", 
    "react-icons": "^2.2.1", 
    "react-redux": "^4.4.5", 
    "react-router": "^3.0.0", 
    "react-router-bootstrap": "^0.23.1", 
    "react-router-redux": "^4.0.7", 
    "redux": "^3.6.0", 
    "redux-thunk": "^2.1.0", 
    "whatwg-fetch": "^2.0.1" 
    } 

Answer 1

更改module.accept代码

let render =() => { 
    ReactDOM.render(
    <AppContainer> 
     <Provider store={store}> 
      <CurrentAppRouter history={history} /> 
     </Provider> 
     </AppContainer>, 
     rootElement 
    ) 
} 

module.hot.accept('./router.jsx',() => 
    setImmediate(() => { 
    ReactDOM.unmountComponentAtNode(rootElement) 
    render() 
    }) 
) 

Answer 2

虽然我从上反应热装载机的专家很远，我能够通过下面的例子here和here得到它的工作。

我的代码看起来像这样。

import Root from './containers/Root'; 
// Root has the <Provider><Router>...</Router></Provider> components 

render(
    <AppContainer> 
    <Root store={store} history={history}/> 
    </AppContainer>, 
    document.getElementById('app') 
); 

if (module.hot) { 
    module.hot.accept('./containers/Root',() => { 
    const Root = require('./containers/Root').default; 
    render(
     <AppContainer> 
     <Root store={store} history={history}/> 
     </AppContainer>, 
     document.getElementById('app') 
    ); 
    }); 
} 

从你的代码相比，最大的区别似乎是我重新require荷兰国际集团每当热重装触发根组件。我还配置了热重新加载一层以上react-router。

我得到了相同的反应路由器警告，显示在您的控制台，我目前只是无视它;我的应用程序的其余部分的热加载正在工作。