Loadable-components: I need help . code splite done, but I get a warning.

Created on 10 Apr 2019 · 7Comments · Source: gregberge/loadable-components

import React from 'react';
import { NavLink, Route, Switch } from "react-router-dom";
import Index from './index/index.jsx';

import loadable from '@loadable/component'
import Loading from "./loading";

const LoadableComponent = loadable(() => import(/* webpackChunkName: "article" */'./article/index.jsx'), {
  fallback: Loading,
})

export default class Router extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li><NavLink to="/" activeClassName="selected">Index</NavLink></li>
          <li><NavLink to="/article" activeClassName="selected">Article</NavLink></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Index} />
          <Route exact path="/article" component={LoadableComponent} />
        </Switch>
      </div>
    );
  }
}

react-dom.development.js:506 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in InnerLoadable (created by Context.Consumer)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Route (created by Router)
    in Switch (created by Router)
    in div (created by Router)
    in Router
    in Router (created by BrowserRouter)
    in BrowserRouter