Add client-side routing

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}/>
-                <BottomMenuButton label="Köp biljett" icon={buyTicketsIcon}/>
-                <BottomMenuButton label="Reseplanering" icon={travelIcon}/>
+                <Link to="/tickets">
+                    <BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
+                </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;