リアクションホットローダー：このコンポーネントはホットローダーで受け付けていません

Question

私はhttps://github.com/stylesuxx/generator-react-webpack-reduxを発電機に使用していますが、ホットローダーを使用しています。私のコードは、ブラウザで正常にロードすることができますが、私は、ブラウザでの開発パネルを開いたとき、私は私のclient.jsで

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

が発生し、コードは以下の通りである：

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

どのように私べきホットローダーにコンポーネントを受け入れるようにコメント付きコードを変更してください。下のコードで試してみると、うまくいきません。

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

多くのコードの複製があります。すべて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コードをレンダリング複製したくないということです。コードを抽出し、クライアント側のコードを描画する専用の関数を作成するとき。ソリューションがはるかに明確になります。

サーバー上のコードをレンダリングするために同じ機能を使用できるため、サーバー側のレンダリングの処理にも役立ちます。