反应热载入程序：此组件未被热载入程序接受

我正在使用https://github.com/stylesuxx/generator-react-webpack-redux作为发生程序，并且正在使用热载入程序。我的代码能够在浏览器中正常加载，但是当我在浏览器中打开开发板，我遇到反应热载入程序：此组件未被热载入程序接受

React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top level class, a function or a variable. 
Click below to reveal the source location: 
ƒ (props, context, updater) { 
     // This constructor gets overridden by mocks. The argument is used 
     // by mocks to assert on what gets mounted. 

     if (process.env.NODE_ENV !== 'production'…

在我client.js，代码如下所示：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 
import { Provider } from 'react-redux'; 
import { Router, IndexRoute, Route, browserHistory, hashHistory } from 'react-router'; 
import App from './containers/App'; 
import configureStore from './stores'; 

import Contact from './containers/contact/Contact' 
import Homepage from './containers/homepage/Homepage' 
import About from './containers/about/About' 
import Theme from './containers/themes/Themes' 
import Login from './containers/login/Login' 
import Signup from './containers/signup/Signup' 

const store = configureStore(); 

const routes = { 
    path: '/', 
    indexRoute: {onEnter: (nextState, replace) => replace('/home')}, 
    childRoutes: [ 
    require('./containers/homepage').default, 
    require('./containers/themes').default, 
    require('./containers/contact').default, 
    require('./containers/about').default, 
    require('./containers/login').default, 
    require('./containers/signup').default, 
    { 
     path: '*', 
     indexRoute: { onEnter: (nextState, replace) => replace('/error/404') } 
    } 
    ] 
}  

ReactDOM.render((
    <Provider store={store}> 
    <Router onUpdate = {() => window.scrollTo(0, 0)} 
     history={hashHistory} 
     routes={routes} 
    /> 
</Provider> 
), document.getElementById('app')); 

// if (module.hot) { 
// module.hot.accept('./containers/App',() => { 
//  const NextApp = require('./containers/App').default; // eslint- 
disable-line global-require 
// 
//  ReactDOM.render(
//  <AppContainer> 
//   <Provider store={store}> 
//   <NextApp /> 
//   </Provider> 
//  </AppContainer>, 
//  document.getElementById('app') 
// ); 
// }); 
// }

我应该如何修改注释代码以使Hot Loader接受组件，我尝试使用下面的代码，但它不起作用。

if (module.hot) { 
    module.hot.accept('./containers/App',() => { 
    const NextApp = require('./containers/App').default; // eslint-disable-line global-require 

    ReactDOM.render(
     <AppContainer> 
     <Provider store={store}> 
     <Router onUpdate = {() => window.scrollTo(0, 0)} 
      history={hashHistory} 
      routes={routes} 
     /> 
     </Provider> 
     </AppContainer>, 
     document.getElementById('app') 
    ); 
    }); 
}

来源

2017-10-21 Mervyn Lee

你让它工作？ :) – Michal

不= =（我现在决定忽略它 –

看看我的回购，你可能需要摆脱服务人员，除此之外，它对你的项目来说几乎是完美的形状，你可以回到这个问题后面 – Michal

我看到很多代码重复。而不是所有的ReactDOM.render((尝试创建函数，为您呈现DOM。

看我的例子repo

首先我创建render功能：

const render =() => { ReactDOM.render(
    (
     <Provider store={store}> 
     <BrowserRouter> 
      {renderRoutes(routes)} 
     </BrowserRouter> 
     </Provider> 
    ), 
    document.getElementById('root'), ) }

然后我渲染应用：

render()

然后我处理热重装：

if (module.hot) { 
    module.hot.accept() 
}

这可能是这样也处理：

if (module.hot) { 
    module.hot.accept('./app',() => { 
    const UpdatedApp = require('./app').default // require('./app').default = renderRoutes(routes) 
    render(UpdatedApp) 
    }) 
}

但我的观点是，你不想重复渲染DOM代码。当您提取代码并创建用于渲染客户端代码的专用函数时。你会看到更清晰的解决方案。

它也将帮助您处理服务器端渲染，因为您将能够使用相同的功能呈现服务器上的代码。

来源

2017-10-21 11:02:06 Michal

反应热载入程序：此组件未被热载入程序接受

回答

相关问题