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。

我得到了相同的反應路由器警告，顯示在您的控制檯，我目前只是無視它;我的應用程序的其餘部分的熱加載正在工作。