AsyncLoadFile.jsx
import React, { Component } from 'react';
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
/**
* @constructor
* @desc Represents AsyncComponent component
* @param props Properties passed from parent component
*/
constructor(props) {
super(props);
this.state = {
component: null
};
}
// Returns the needed component markup
// Can be a single child component or null or false
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
// Called after render method
// Enables DOM manipulations or data fetching operations
// DOM interactions should always happen here
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
}
return AsyncComponent;
}
import AsyncComponentLoad from 'AsyncLoadFile.jsx';
const someComponent = AsyncComponentLoad(() => import('theComponent'));
<Switch>
<Route
exact
path={`${prependUrl}`}
component={Home} />
</Switch>
Maybe you want to check it here:
https://github.com/emibcn/covid/blob/master/app/src/asyncComponent.jsx
I used your code (used here) and added the full module async loader (used here).