バンドリングルート：nullの '_currentElement'プロパティを読み取れません

Question

私はルートをバンドルしようとしていて、反応トレーディング（https://reacttraining.com/react-router/web/guides/code-splitting）でロードしたときにレンダリングしていますが、バンドルコンポーネントのレンダリングメソッドでエラーが発生します。 私はまた、まだロードされていないかもしれないが、うまくいかなかった場合にバンドルせずに、あるコンポーネントをそのまま作成しようとしました。どんな助けもありがたい。

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

マイバンドル成分：ルートと

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