使用反应路由器和 webpack 获取异步组件时未定义 this.props.children答案

【问题标题】：undefined this.props.children when getting async component with react router and webpack使用反应路由器和 webpack 获取异步组件时未定义 this.props.children
【发布时间】：2016-06-28 10:51:16
【问题描述】：

我正在使用 react、redux 和 react router 等工具来构建和示例应用程序。

我正在尝试异步加载应用程序的不同部分。我已经将我的应用程序划分为鸭子，我正在遵循这个示例https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers

我正在使用：
react-router 2.0.1 webpack 1.12.13 webpack-dev-middleware 1.5.1 webpack-hot-middleware 2.6.4

我的路线：

import App from './components/layouts/app'
import Home from './components/common/home'
import Login from './containers/login'
import Register from './containers/register'

export default function configureRoutes(reducerRegistry) {
  return(
    <Route component={App}>
      <Route  path='/' component={Home} />
      <Route path='/login' component={Login}/>
      <Route path='/register' component={Register}/>
      <Route path='/admin' getComponent={(location, cb) => {
        require.ensure([], require => {
          reducerRegistry.register({admin: require('./modules/admin')})
          if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
              module.hot.accept('./modules/admin', () => {
                reducerRegistry.register({admin: require('./modules/admin')})
              })
            }
          }
          cb(null, require('./containers/admin'))
        })
      }}/>
    </Route>
)}

我的管理组件：

import React, { PropTypes, Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { load } from '../modules/admin'


class Admin extends Component {
  componentDidMount() {
    this.props.load()  
  }
  render() {
    const { message, isFetching } = this.props
    return (
      <div>
        <p>{message}</p> 
        <p>This module was loaded via chunk </p>
        {isFetching && <p>Doing some fake loading ...</p>}
      </div>
    )  
  }  
}

Admin.propTypes = {
  message: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  load: PropTypes.string.isRequired
}

function mapStateToProps(state) {
  return state.admin 
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ load }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Admin)

问题出在/admin，app 的this.props.children 组件未定义，所以我的组件永远不会被渲染。

转到/admin 后，我还能够检查该状态是否不包括管理员。

我可以看到请求的块正在被请求和响应，它确实包含减速器和组件。但它们没有被应用。

您有什么想法可以从哪里开始寻找吗？我没有他们

提前致谢

【问题讨论】：

标签： webpack react-router redux

【解决方案1】：

我正在使用带有导入和导出功能的 ES6 模块，但 webpack 使用 ES5、commonJS 模块，因此 require 请求使用包含 default 和我从该模块导出的所有其他属性的对象来回答。

所以我必须将 require('./x') 请求更改为 require('./x').default 才能使其工作

export default function configureRoutes(reducerRegistry) {
  return(
    <Route component={App}>
      <Route  path='/' component={Home} />
      <Route path='/login' component={Login}/>
      <Route path='/register' component={Register}/>
      <Route path='/admin' getComponent={(location, cb) => {
        require.ensure([], require => {
          const reducer = require('./modules/admin').default
          const component = require('./containers/admin').default
          reducerRegistry.register({admin: reducer})
          if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
              module.hot.accept('./modules/admin', () => {
                reducerRegistry.register({admin: reducer})
              })
            }
          }
          cb(null, component)
        })
      }}/>
    </Route>
)}

【讨论】：