捆绑路线：无法读取 null 的属性“_currentElement”

Question

我正在尝试捆绑路由，然后在 reacttraining(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

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

带有路由的我的根组件：

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