Add client-side routing

src/App.js

@@ -2,27 +2,30 @@ import './variables.css';
 import './App.css';
 
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import NavigationDrawer from './components/NavigationDrawer.js'
-import Header from './components/Header.js'
-import PageArea from './components/PageArea.js'
 import BottomMenu from './components/BottomMenu.js'
 
+import Tickets from './components/pages/Tickets.js'; 
+import TicketsBuy from './components/pages/TicketsBuy.js';
+import Travel from './components/pages/Travel.js';
+ 
 class App extends Component {
     render() {
         return (
-            <div className="App">
+            <Router>
-                {/*
+                <div className="App"> 
-                <Button
+                    <NavigationDrawer />
-                    title = "placeholderTitle"
+
-                    destination = "placeholderDestination"
+                    <Route path="/" exact component={TicketsBuy} />
-                />
+                    <Route path="/tickets" exact component={Tickets} />
-                */}
+                    <Route path="/ticketsBuy" exact component={TicketsBuy} />
-                <NavigationDrawer />                
+                    <Route path="/travel" exact component={Travel} />     
-                <Header title="Köp biljett" />
+
-                <PageArea />
+                    <BottomMenu />
-                <BottomMenu />
+                </div>
-            </div>
+            </Router>
         );
     }
 }

src/components/BottomMenu.js

@@ -1,17 +1,28 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+import BottomMenuButton from './BottomMenuButton';
+
 import './css/BottomMenu.css';
 import ticketsIcon from '../img/tickets.svg';
-import buyTicketsIcon from '../img/tickets+.svg';
+import ticketsBuyIcon from '../img/tickets+.svg';
 import travelIcon from '../img/tram.svg';
-import BottomMenuButton from './BottomMenuButton';
 
 class BottomMenu extends Component {
     render() {
         return (
             <div id="bottomMenu">
-                <BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
+                <Link to="/tickets">
-                <BottomMenuButton label="Köp biljett" icon={buyTicketsIcon}/>
+                    <BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
-                <BottomMenuButton label="Reseplanering" icon={travelIcon}/>
+                </Link>
+                
+                <Link to="/ticketsBuy">
+                    <BottomMenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
+                </Link>
+
+                <Link to="/travel">
+                    <BottomMenuButton label="Reseplanering" icon={travelIcon}/>
+                </Link>
             </div>
         );
     }

src/components/css/BottomMenu.css

@@ -8,6 +8,11 @@
     border-top: 2px solid rgba(0, 0, 0, 0.05);
 }
 
+#bottomMenu a {
+    display: contents;
+    text-decoration: none;
+}
+
 #bottomMenu button {
     background: none;
     border: none;

src/components/pages/Tickets.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js'
+import MainArea from '../MainArea.js'
+
+class Tickets extends Component {
+    render() {
+        return (
+            <>
+                <Header title="Biljetter" />
+                <MainArea />
+            </>
+        );
+    }
+}
+
+export default Tickets;

src/components/pages/TicketsBuy.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js'
+import MainArea from '../MainArea.js'
+
+class TicketsBuy extends Component {
+    render() {
+        return (
+            <>
+                <Header title="Köp biljett" />
+                <MainArea />
+            </>
+        );
+    }
+}
+
+export default TicketsBuy;

src/components/pages/Travel.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js'
+import MainArea from '../MainArea.js'
+
+class Travel extends Component {
+    render() {
+        return (
+            <>
+                <Header title="Reseplanering" />
+                <MainArea />
+            </>
+        );
+    }
+}
+
+export default Travel;