반응 로더 :이 구성 요소는 핫 로더에서 허용되지 않습니다.

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

을 어떻게해야 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') 
    ); 
    }); 
} 

Answer 1

많은 코드 중복이 있습니다. 모든 ReactDOM.render(( 대신 DOM을 렌더링하는 함수를 만들어보십시오. 그런 다음

render() 

나는 뜨거운 재로드 처리 :

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

그럼 내가 응용 프로그램을 렌더링 :

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

을 내 예를 repo

처음

봐 나는 render 함수를 작성 또한 다음과 같이 처리 할 수 ​​

:

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

하지만 내 요점은 당신이이 DOM 코드를 렌더링 복제하지 않을 것입니다. 코드를 추출하고 클라이언트 측 코드를 렌더링하기위한 전용 함수를 만들 때. 솔루션을 훨씬 더 명확하게 볼 수 있습니다.

서버에서 코드를 렌더링하는 데 동일한 기능을 사용할 수 있으므로 서버 측 렌더링 처리에도 도움이됩니다.