React模块无法热升级

问题描述：

Im使用react-router和material-ui构建Web应用程序。我最近注意到，在使用ho loader与material-ui的同时，反应热载入程序已经更新并解决了一些问题。当我使用它与反应路由器热加载器不会为儿童组件工作。这里是我的index.jsReact模块无法热升级

import React from 'react'; 
import {render} from 'react-dom'; 
import { AppContainer } from 'react-hot-loader' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router' 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import routes from './routes'; 

injectTapEventPlugin(); 

const App =() => (
    <MuiThemeProvider> 
    <Router history={browserHistory} routes={routes} /> 
    </MuiThemeProvider> 
); 

render(<App/>,document.getElementById('app')); 

if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    const NextApp = require('./components/App').default; 
    render(
     <AppContainer> 
     <MuiThemeProvider> 
     <NextApp/> 
     </MuiThemeProvider> 
     </AppContainer> 
     , 
     document.getElementById('app') 
    ); 
    }); 
}

这里的代码我的应用程序组件

import React from 'react'; 
import Home from './Home'; 
import About from './About/AboutPage.react'; 
import NavigationBar from './navigation/navigationBar.react'; 



class App extends React.Component{ 
    render(){ 
    return(
     <div> 
     <NavigationBar/> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default App;

路由文件

import React from 'react'; 
import {render} from 'react-dom'; 
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router' 
import App1 from './components/App'; 
import NavigationBar from './components/navigation/navigationBar.react'; 
import greetings from './components/Login/greetings'; 


export default (
    <Route path="/" component={App1}> 
     <IndexRoute component={greetings}/> 
    </Route> 
);

当过我做任何更改子组件的浏览器控制台给出警告说
以下模块不能热更新:(完全重载需要编辑）这通常是因为改变的模块（和他们的父母）不知道如何热重新加载自己。有关更多详细信息，请参见http://webpack.github.io/docs/hot-module-replacement-with-webpack.html。任何特殊的原因，为什么我得到这个以及如何解决这个问题？

答

确保您还使用react-hot-loader的AppContainer组件来包装初始渲染。就像这样：

const App =() => (
    <AppContainer> 
    <MuiThemeProvider> 
     <Router history={browserHistory} routes={routes} /> 
    </MuiThemeProvider> 
    </AppContainer> 
);

而且，我没有看到你的WebPack配置，以便确保您还包括react-hot-loader/patch您的第一个条目是这样，例如：

entry: [ 
    'react-hot-loader/patch', 
    `webpack-dev-server/client?http://localhost:${config.port}`, 
    'webpack/hot/only-dev-server', 
    './src/index.jsx' 
],

如果你也有一个.babelrc文件，请确保将其包含为您的一个插件，如下所示：

{ 
    "presets": [ 
    "react", 
    "es2015", 
    "stage-0" 
    ], 
    "plugins": [ 
    "react-hot-loader/babel", 
    "transform-decorators-legacy" 
    ] 
}

React模块无法热升级

相关推荐