Route.js

import { BrowserRoute, Match, Miss } from 'react-router';
import { MainLayout, HomePage, Other } from './components';

const MatchWithMainLayout = ({ exactly, pattern, component: Component }: any) => {
  return (
    <Match exactly={exactly} pattern={pattern} render={(props: any) => (
      <MainLayout><Component {...props} /></MainLayout>
    )} />
  );
};

const AppRoutes = () => {
  return (
    <BrowserRouter>
      <div>
        <MatchWithMainLayout exactly pattern="/" component={HomePage} />
        <MatchWithMainLayout pattern="/:foo/bar" component={(props: any) => <Other {...props} foo="bar" />} />
        <Miss component={NotFound} />
      </div>
    </BrowserRouter>
  );
};