使用 react 路由器和 webpack 获取异步组件时未定义 this.props.children [英] undefined this.props.children when getting async component with react router and webpack
问题描述
我正在使用 react、redux 和 react router 等来构建和示例应用程序.
我正在尝试异步加载应用程序的不同部分.我已经将我的应用程序分成了鸭子，我正在关注这个例子 https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers
我正在使用:
<代码>反应路由器2.0.1网络包 1.12.13webpack-dev-middleware 1.5.1webpack-hot-middleware 2.6.4
我的路线:
从'./components/layouts/app'导入应用程序从./components/common/home"导入主页从 './containers/login' 导入登录从'./containers/register'导入注册导出默认函数 configureRoutes(reducerRegistry) {返回(<路由组件={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')})如果(process.env.NODE_ENV ！=='生产'){如果(模块.热){module.hot.accept('./modules/admin', () => {reducerRegistry.register({admin: require('./modules/admin')})})}}cb(null, require('./containers/admin'))})}}/></路线>)}我的管理组件:
import React, { PropTypes, Component } from 'react'从redux"导入 { bindActionCreators }从'react-redux'导入{连接}从'../modules/admin'导入{加载}类管理扩展组件{componentDidMount() {this.props.load()}使成为() {const { message, isFetching } = this.props返回 (<div><p>{消息}</p><p>这个模块是通过块</p>加载的.{isFetching &&<p>做一些假加载...</p>})}}Admin.propTypes = {消息:PropTypes.string.isRequired，isFetching: PropTypes.bool.isRequired,负载:PropTypes.string.isRequired}函数 mapStateToProps(state) {返回 state.admin}函数 mapDispatchToProps(dispatch) {返回 bindActionCreators({ load }, dispatch)}导出默认连接(mapStateToProps，mapDispatchToProps)(管理员)
问题出在 /admin 上，app 组件的 this.props.children 未定义，所以我的组件永远不会被渲染.
我还可以在转到 /admin 后检查状态是否不包括管理员.
我可以看到请求的块正在被请求和响应，并且它确实包含减速器和组件.但它们并没有被应用.
您知道从哪里开始寻找吗?我不在他们了
提前致谢
我使用 ES6 模块进行导入和导出，但 webpack 使用 ES5、commonJS 模块，因此 require 请求带有对象的答案包含 default 和我从该模块导出的所有其他属性.
所以我必须将 require('./x') 请求更改为 require('./x').default 以使其工作
导出默认函数 configureRoutes(reducerRegistry) {返回(<路由组件={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').defaultconst component = require('./containers/admin').defaultreducerRegistry.register({admin: reducer})如果(process.env.NODE_ENV ！=='生产'){如果(模块.热){module.hot.accept('./modules/admin', () => {reducerRegistry.register({admin: reducer})})}}cb(空，组件)})}}/></路线>)}I'm using react, redux and react router among others to build and example app.
I'm trying to load asynchronously different parts of my application. I've divided my app in ducks and I'm following this example https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers
I'm using:
react-router 2.0.1
webpack 1.12.13
webpack-dev-middleware 1.5.1
webpack-hot-middleware 2.6.4
My routes:
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>
)}
My admin component:
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)
The problem is going to /admin, this.props.children of app component is undefined, so my component never gets rendered.
I was also able to check that the state doesn't include the admin after going to /admin.
I can see that the requested chunk is being requested and responded and it does contain the reducer and the component. But they are not being applied.
Do you have any ideas where to start looking? I'm out of them
Thanks in advance
I'm using ES6 modules with import and export but webpack uses ES5, commonJS modules, so the require requests answers with an object containing default and all the other properties I'm exporting from that module.
So I have to change the require('./x') requests to require('./x').default to make it work
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>
)}
这篇关于使用 react 路由器和 webpack 获取异步组件时未定义 this.props.children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
