Use history for non-component history manipulation

app/javascript/packs/frontend/App.tsx

@@ -1,7 +1,8 @@
 import React, {lazy, Suspense} from 'react';
-import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
+import {Router, Route, Link, Switch} from 'react-router-dom';
 import {hot} from 'react-hot-loader/root';
 
+import history from './history';
 import ApplicationLayout from './components/layout/ApplicationLayout';
 
 const Pokemon = lazy((): Promise<any> => import('./components/pages/Pokemon'));
@@ -12,7 +13,7 @@ import './assets/stylesheets/app.scss';
 
 function App(): React.ReactElement {
   return (
-    <BrowserRouter>
+    <Router history={history}>
       <ApplicationLayout>
         <Suspense fallback={<div>Loading...</div>}>
           <Switch>
@@ -27,7 +28,7 @@ function App(): React.ReactElement {
           </p>
         </Suspense>
       </ApplicationLayout>
-    </BrowserRouter>
+    </Router>
   );
 }
 

app/javascript/packs/frontend/history.ts

@@ -0,0 +1,3 @@
+import {createBrowserHistory} from 'history';
+
+export default createBrowserHistory();

package.json

@@ -37,6 +37,7 @@
     "@rails/webpacker": "^4.0.2",
     "bootstrap": "^4.3.1",
     "graphql-ruby-client": "^1.6.4",
+    "history": "^4.9.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.8",