pokemon.trade/app/javascript/packs/frontend/app.jsx

import React, {lazy, Suspense} from 'react';
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
import {hot} from 'react-hot-loader/root';

import ApplicationLayout from './components/layout/application_layout';

const Pokemon = lazy(() => import('./components/pages/pokemon'));
const NotFound = lazy(() => import('./components/pages/not_found'));
const TestComponent = lazy(() => import('./components/test_component'));

import './assets/stylesheets/app.scss';

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <ApplicationLayout>
          <Switch>
            <Route component={TestComponent} exact path='/' />
            <Route component={Pokemon} path='/pokemon' />

            <Route component={NotFound} />
          </Switch>

          <p>
            <Link to='/pokemon'>Show me the pokemon!</Link>
          </p>
        </ApplicationLayout>
      </Suspense>
    </BrowserRouter>
  );
}

export default hot(App);