Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import * as RoutingConstants from './constants/RoutingConstants';
import { Route, Switch } from 'react-router-dom';
import LoadingComponent from './pages/LoadingComponent';
import React, { Component } from 'react';
function asyncComponent(importComponent: Function, LoadingComponent: Function) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : <LoadingComponent />;
}
}
return AsyncComponent;
}
const Products = asyncComponent(() => import('./pages/Products'), LoadingComponent);
const Homepage = asyncComponent(() => import('./pages/Homepage'), LoadingComponent);
const AboutUs = asyncComponent(() => import('./pages/AboutUs'), LoadingComponent);
class App extends Component<{}, {}> {
render() {
return (
<div>
<Switch>
<Route exact path={'/'} component={Homepage} />
<Route exact path={'/products'} component={Products} />
<Route exact path={'/about-us'} component={AboutUs} />
</Switch>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.