page not changing after clicking on Nav bar

src/App.js

@@ -1,19 +1,39 @@
 import React from "react";
 import TopNav from "./components/TopNav";
 import SideNav from "./components/SideNav";
+import Dashboard from "./components/Dashboard";
+import Charts from "./components/Charts";
+import Tables from "./components/Tables";
+import Settings from "./components/Settings";
+import Wall from "./components/Wall";
+import Profiles from "./components/Profiles";
+import Marquee from "./components/Marquee";
+import Profile from "./components/Profile";
+import {BrowserRouter, Switch, Route} from "react-router-dom";
 
 function App() {
   return (
-    <div> 
-      <div id="wrapper">
-        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
-          <TopNav />
-          <SideNav />
-        </nav>
-        <div style={{backgroundColor: "white"}}>
-          {/* PUT YOUR ROUTES HERE */}
+    <div>
+      <BrowserRouter>
+        <div id="wrapper">
+          <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+            <TopNav />
+            <SideNav />
+          </nav>
+          <div style={{backgroundColor: "white"}}>
+            <Switch>
+              <Route path="/" component={Dashboard} />
+              <Route path="/charts" component={Charts} />
+              <Route path="/tables" component={Tables} />
+              <Route path="/settings" component={Settings} />
+              <Route path="/wall" component={Wall} />
+              <Route path="/profiles" component={Profiles} />
+              <Route path="/marquee/:text" component={Marquee} />
+              <Route path="/profile/:id" component={Profile} />
+            </Switch>
+          </div>
         </div>
-      </div>
+      </BrowserRouter>
     </div>
 
   );

src/components/Charts.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Charts() {
+  return (
+        <div>
+            Charts
+        </div>
+    );
+}
+
+export default Charts;

src/components/Marquee.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 function Marquee(props) {
-  const message = "hello";
-  return (   
+  const message = props.match.params.text;
+  return (
     <marquee>{message}</marquee>
   );
 }

src/components/Profile.js

@@ -2,9 +2,9 @@ import React from "react";
 import {connect} from "react-redux";
 
 function Profile(props) {
-  const userId = 0;
+  const userId = props.match.params.id;;
   const user = props.users.find(u => u.id == userId) || {};
-  return (   
+  return (
     <div>
       <h3>{user.firstName} {user.lastName}</h3>
       <h4>{user.occupation}</h4>
@@ -18,4 +18,3 @@ function Profile(props) {
 export default connect(function (state) {
   return {users: state.users};
 })(Profile);
-

src/components/Profiles.js

@@ -1,21 +1,20 @@
 import React from "react";
+import {Link} from "react-router-dom";
 import {connect} from "react-redux";
 
 function Profiles(props) {
   const userDivs = props.users.map((user,i) => {
     return (
       <div key={i}>
         {user.firstName} - {user.lastName}
-        <a href="#"> View </a>
+        <Link to={"/profile/" + user.id}> View </Link>
       </div>);
   });
-  return (   
+  return (
     <div>{userDivs}</div>
   );
 }
 
 export default connect(function (state) {
   return {users: state.users};
 })(Profiles);
-
-

src/components/Settings.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Settings() {
+  return (
+        <div>
+            Settings
+        </div>
+    );
+}
+
+export default Settings;

src/components/SideNav.js

@@ -1,29 +1,53 @@
 import React from "react";
-// import {Link} from "react-router-dom";
+import {Link} from "react-router-dom";
 
 function SideNav() {
   return (
     <div className="collapse navbar-collapse navbar-ex1-collapse">
       <ul className="nav navbar-nav side-nav">
         <li className="active">
-          {/*
           <Link to="/"> <i className="fa fa-fw fa-dashboard" />
-            Dashboard 
+            Dashboard
           </Link>
-          */}
         </li>
         <li>
-          <a href="charts.html">
+          <Link to={"/charts"}>
             <i className="fa fa-fw fa-bar-chart-o" /> Charts
-          </a>
+          </Link>
         </li>
         <li>
-          <a href="tables.html">
+          <Link to={"/tables"}>
             <i className="fa fa-fw fa-table" /> Tables
-          </a>
+          </Link>
+          <Link to="/settings">
+            <i className="fa fa-fw fa-bar-chart-o" /> Settings
+          </Link>
+        </li>
+        <li>
+          <Link to="/wall">
+            <i className="fa fa-fw fa-table" /> Wall
+          </Link>
+        </li>
+        <li>
+          <Link to="/profiles">
+            <i className="fa fa-fw fa-bar-chart-o" /> Profiles
+          </Link>
+        </li>
+        <li>
+          <Link to="/marquee/iloveroutes">
+            <i className="fa fa-fw fa-table" /> Marquee I love routes
+          </Link>
+        </li>
+        <li>
+          <Link to="/marquee/reactroutesrule">
+            <i className="fa fa-fw fa-table" /> Marquee React Routes Rule
+          </Link>
+          <Link to="/marquee/ilovetonyromo">
+            <i className="fa fa-fw fa-table" /> Marquee I LOVE TONY ROMO
+          </Link>
         </li>
       </ul>
-    </div>);  
+    </div>);
 }
 
 export default SideNav;

src/components/Tables.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Tables() {
+  return (
+        <div>
+            Tables
+        </div>
+    );
+}
+
+export default Tables;

src/components/Wall.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Wall() {
+  return (
+        <div>
+            Wall
+        </div>
+    );
+}
+
+export default Wall;

src/components/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Battleship React</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style2.css" />
+  </head>
+  <body>
+    <div id="react">
+
+    </div>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+    <script type="text/babel" src="./script2.js"></script>
+  </body>
+  <!-- <footer>
+    <button type="button" name="random">random</button>
+  </footer> -->
+</html>