我正在尝试捆绑路由,然后在反应训练(https://reacttraining.com/react-router/web/guides/code-splitting)加载示例时渲染它们,但是我在使用Bundle组件的渲染方法时遇到错误。 我也试图制作一个组件,而不是捆绑,以防可能它尚未加载,但没有工作。任何帮助赞赏。
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null. Check the render method of 'Bundle'.
Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null
My Bundle组件:
import React, { Component } from 'react'
export default class Bundle extends Component {
constructor(props) {
super(props)
this.state = {
// short for "module" but that's a keyword in js, so "mod"
mod: null
}
}
componentWillMount() {
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load(props) {
this.setState({
mod: null
})
props.load((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod
})
})
}
render() {
console.log(`console`)
console.log(this.props.children(this.state.mod))
return this.props.children(this.state.mod)
}
}
我的Root组件包含路由:
import React, { Component } from 'react'
import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom'
import loadMainPage from 'bundle-loader?lazy!./../components/MainPage'
import loadLocation from 'bundle-loader?lazy!./../components/Location'
import Bundle from '../components/Bundle'
import 'bootstrap/dist/css/bootstrap.css'
import 'babel-polyfill'
export const Location = () => (
<Bundle load={loadLocation}>
{(Location) => <Location/>}
</Bundle>
)
export const MainPage = () => (
<Bundle load={loadMainPage}>
{(MainPage) => <MainPage/>}
</Bundle>
)
class Root extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
loadMainPage(() => {})
loadLocation(() => {})
}
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={MainPage} />
<Route path="/bar" component={Location} />
<Route path="/barbershop" component={Location} />
</Switch>
</Router>
)
}
}
export default Root
我的app.js:
import React from 'react'
import ReactDOM from 'react-dom'
import Root from './containers/Root'
import 'bootstrap/dist/css/bootstrap.css'
import { Provider } from 'react-redux'
import { configureStore, sagaMiddleware } from './configureStore'
import rootSaga from './sagas/index'
const store = configureStore()
sagaMiddleware.run(rootSaga)
ReactDOM.render(
<Provider store={store}>
<Root />
</Provider>,
document.getElementById('root')
)
答案 0 :(得分:1)
糟糕,忘记在捆绑加载时添加处理。 像这样:
const Location = () => (
<Bundle load={loadLocation}>
{
(Location) => Location
? <Location/>
: <Loading text='Loading...' />
}
</Bundle>
)