Moved Router to the same component as Route

src/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ChartView} from './chart_view';
-import {Route, RouteComponentProps, Switch} from 'react-router-dom';
+import {HashRouter as Router, Route, RouteComponentProps, Switch} from 'react-router-dom';
 import {Intro} from './intro';
 import {TopBar} from './top_bar';
 
@@ -9,7 +9,8 @@ export class App extends React.Component<{}, {}> {
 
   render() {
     return (
-      <div className="root">
+      <Router>
+      <>
         <Route
           component={(props: RouteComponentProps) => (
             <TopBar
@@ -34,7 +35,8 @@ export class App extends React.Component<{}, {}> {
             )}
           />
         </Switch>
-      </div>
+      </>
+      </Router>
     );
   }
 }

src/index.css

@@ -1,4 +1,4 @@
-body, html, #root {
+body, html {
   height: 100%;
 }
 
@@ -6,7 +6,7 @@ body, html, #root {
   cursor: pointer;
 }
 
-.root {
+#root {
   height: 100%;
   display: flex;
   flex-direction: column;

src/index.tsx

@@ -6,7 +6,6 @@ import messages_pl from './translations/pl.json';
 import {addLocaleData} from 'react-intl';
 import {App} from './app';
 import {detect} from 'detect-browser';
-import {HashRouter as Router} from 'react-router-dom';
 import {IntlProvider} from 'react-intl';
 import './index.css';
 import 'semantic-ui-css/semantic.min.css';
@@ -31,9 +30,7 @@ if (browser && browser.name === 'ie') {
 } else {
   ReactDOM.render(
     <IntlProvider locale={language} messages={messages[language]}>
-      <Router>
+      <App />
-        <App />
-      </Router>
     </IntlProvider>,
     document.querySelector('#root'),
   );