我正在使用react-router和material-ui构建一个Web应用程序 . 我最近注意到反应热装载机已经更新,并且在使用材料-u的ho装载器时遇到了一些问题 . 当我使用反应路由器时,热装载机不适用于儿童组件 . 这是我的index.js代码
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')
);
});
}
这是我的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>
);
当我对子组件进行任何更改时,浏览器控制台会发出警告
the following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details. 为什么我得到这个以及如何解决这个问题的任何特殊原因?
1 回答
确保你也使用react-hot-loader的AppContainer组件包装初始渲染 . 像这样:
另外,我没有看到你的webpack配置,所以请确保你的第一个条目也包括
react-hot-loader/patch
,例如:如果您还有一个
.babelrc
文件,请确保将其作为您的插件之一包含在内: