why don't you use react.lazy? It is the official component.

const About = React.lazy(() => import('./About')
<Route exact path="/about" component={props => <About {...props} />} />


this is your "About" component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

you are not returning jsx. thats why you are getting error.
this is how you should have returned jsx.

 const About = () => (<h2>About</h2>);



This is a known issue of react router.

I think that you could code the route like this:

<Route path="/about/" component={props => <About {...props} />} />

Be careful with this implementation, because you could have some buggy behaviours with the re-renders.

Related Query

More Query from same tag