A React HOC for loading router components upon request

asyncComponent.js

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
    class Comp extends Component {
        state = {
            component: null
        }

        componentDidMount() {
            importComponent()
                .then(cmp => {
                    this.setState({component: cmp.default});
                });
        }

        render() {
            const C = this.state.component;
            return C ? <C {...this.props}/> : null;
        }
    }

    return Comp;
};

export default asyncComponent;

Routes.js

import React, {Component} from 'react';
import {Route, Switch, Redirect, withRouter} from 'react-router-dom';

import HomePage from './containers/HomePage';

const AsyncUserPage    = asyncComponent(() => {
    return import('./containers/UserPage');
});

class Routes extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={HomePage}/>
                <Route exact path='/user' component={AsyncUserPage}/>
            </Switch>
        );
    }
}

export default Routes;