RouterWrapper.tsx

import*asReactfrom'react';
import{Provider}from'react-redux';
import{ConnectedRouter}from'connected-react-router';
import{History}from'history';
import{Redirect,Route,StaticRouter,Switch}from'react-router-dom';
importAboutAsyncfrom'./views/about/AboutAsync';
importHomefrom'./views/home/Home';
importContactfrom'./views/contact/Contact';
importFooterAsyncfrom'./views/landmarks/FooterAsync';
importHeaderfrom'./views/landmarks/Header';
importNotFoundAsyncfrom'./views/errors/NotFoundAsync';
importISagaStorefrom'./stores/ISagaStore';
importModalHubfrom'./views/modals/ModalHub';

interfaceIProviderWrapperProps{
store: ISagaStore;
isServerSide: boolean;
location?: string;
context?: any;
history?: History;
}

constRouterWrapper: React.StatelessComponent<IProviderWrapperProps>=(props: IProviderWrapperProps): JSX.Element=>{
constRouter: any=props.isServerSide ? StaticRouter : ConnectedRouter;
consthistory: History=props.isServerSide ? null : props.history;

return(
<Providerstore={props.store}>
<Router
context={props.context}
location={props.location}
history={history}
>
<divclassName="container">
<Header/>
<Switch>
<Route
exact={true}
path="/"
component={Home}
/>
<Route
path="/about"
component={AboutAsync}
/>
<Route
path="/contact"
component={Contact}
/>
<Redirect
from="/old-path"
to="/"
/>
<Routecomponent={NotFoundAsync}/>
</Switch>
<FooterAsync/>
<ModalHub/>
</div>
</Router>
</Provider>
);
};

exportdefaultRouterWrapper;