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';

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

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

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

export default hot(App);