I need help . code splite done, but I get a warning.

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

Everything is ok, when I remove this block…

[zzyxka]

oh, I forget <>.

[zzyxka]

How to delete this issues , I feel so embarrassed. 😃