React Loader chaud: ce composant est pas acceptée par Hot Loader

Question

J'utilise https://github.com/stylesuxx/generator-react-webpack-redux pour le générateur et je me sers chaud chargeur. Mon code est capable de charger normalement dans le navigateur, mais quand j'ouvre le panneau de développement dans le navigateur, je rencontre

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'… 

Dans mon client.js, le code sont indiquées ci-dessous:

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') 
// ); 
// }); 
// } 

Comment dois-je modifier le code commenté pour que le chargeur accepte le composant, j'ai essayé avec le code ci-dessous et cela ne fonctionne pas.

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') 
    ); 
    }); 
} 

Answer 1

Je vois beaucoup de duplication de code. Au lieu de tous les ReactDOM.render(( essayez de créer une fonction qui rend le DOM pour vous.

Regardez mon exemple repo

D'abord, je crée la fonction render:

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

Alors je rends l'application:

render() 

Puis-je manipuler le rechargement à chaud:

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

Cela pourrait aussi être traité comme ceci:

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

Mais mon point est que vous ne voulez pas dupliquer le rendu du code DOM. Lorsque vous extrayez le code et créez une fonction dédiée pour le rendu du code côté client. Vous verrez la solution beaucoup plus claire.

Il vous aidera également à manipuler le rendu côté serveur parce que vous serez en mesure d'utiliser la même fonction pour rendre le code sur le serveur.