javascript - 捆绑路由: Cannot read property '_currentElement' of null

Question

我正在尝试捆绑路由，然后在它们在reacttraining(https://reacttraining.com/react-router/web/guides/code-splitting)加载示例时渲染它们，但是我在Bundle组件的渲染方法中遇到错误。 我还尝试按原样制作一个组件而不捆绑，以防它可能尚未加载，但不起作用。任何帮助表示赞赏。

React.createElement:类型无效 - 需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:null。检查“Bundle”的渲染方法。

未捕获( promise 中)类型错误:无法读取 null 的属性“_currentElement”

我的捆绑组件:

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)
  }
} 

我的根组件与路线:

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')
) 

Answer 1

糟糕，忘记在加载包时添加处理。 像这样:

const Location = () => (
  <Bundle load={loadLocation}>
    {
      (Location) => Location
      ? <Location/>
      : <Loading text='Loading...' />
    }
  </Bundle>
)