反應熱載入程序：此組件未被熱載入程序接受

我正在使用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

反應熱載入程序：此組件未被熱載入程序接受

回答

相關問題