Switch between home, single, and double

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.4"
   },
   "scripts": {

src/App.js

@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import Navigation from './Components/Navigation'
-import Board from './Components/Board'
+import Home from './Components/Home'
+import SingleJeopardy from './Components/SingleJeopardy'
 import DoubleJeopardy from './Components/DoubleJeopardy'
 
+import {Switch, Route} from 'react-router-dom';
+
 import questions from './static/data/questions'
 import doubleclues from './static/data/doubleclues'
 
@@ -57,8 +60,13 @@ class App extends Component {
     return (
       <div className="App">
         <Navigation />
-        <Board questions={questions} onAddScore={this.addScore} onAddScoreNone={this.addScoreNone} playerList={this.state.playerList} onSumbitPlayer={this.submitPlayer}/>
-        <DoubleJeopardy questions={doubleclues} onAddScore={this.addScore} onAddScoreNone={this.addScoreNone} playerList={this.state.playerList}/>
+        <div className="container">
+        <Switch>
+          <Route exact path="/" render={() => <Home onSumbitPlayer={this.submitPlayer}/>}></Route>
+          <Route exact path="/single" render={() => <SingleJeopardy questions={questions} onAddScore={this.addScore} onAddScoreNone={this.addScoreNone} playerList={this.state.playerList} />}></Route>
+          <Route exact path="/double" render={() => <DoubleJeopardy questions={doubleclues} onAddScore={this.addScore} onAddScoreNone={this.addScoreNone} playerList={this.state.playerList}/>}></Route>          
+        </Switch>
+        </div>
       </div>
     );
   }

src/Components/Home/index.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+
+export default class Home extends Component {
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.props.onSumbitPlayer}>
+          <div className="form-row">
+            <div className="col-2"></div>
+            <div className="col-6">
+              <input type="text" className="form-control" name="name" placeholder="Add a player" />
+            </div>
+            <div className="col-2">
+              <button type="submit" className="btn btn-primary">Add Player</button>
+            </div>
+            <div className="col-2"></div>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}

src/Components/Navigation/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import {NavLink} from 'react-router-dom'
 
 export default class Navigation extends Component {
   render() {
@@ -13,23 +14,15 @@ export default class Navigation extends Component {
         <div className="collapse navbar-collapse" id="collapsibleNavId">
           <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
             <li className="nav-item active">
-              <a className="nav-link" href=" ">Home <span className="sr-only">(current)</span></a>
+              <NavLink className="nav-link" to="/">Home<span className="sr-only">(current)</span></NavLink>
             </li>
             <li className="nav-item">
-              <a className="nav-link" href=" ">Link</a>
+              <NavLink className="nav-link" to="/single">Single Jeopardy</NavLink>
             </li>
-            <li className="nav-item dropdown">
-              <a className="nav-link dropdown-toggle" href=" " id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-              <div className="dropdown-menu" aria-labelledby="dropdownId">
-                <a className="dropdown-item" href=" ">Action 1</a>
-                <a className="dropdown-item" href=" ">Action 2</a>
-              </div>
+            <li className="nav-item">
+              <NavLink className="nav-link" to="/double">Double Jeopardy</NavLink>
             </li>
           </ul>
-          <form className="form-inline my-2 my-lg-0">
-            <input className="form-control mr-sm-2" type="text" placeholder="Search" />
-            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
         </div>
       </nav>
       </div>

src/Components/Board/index.js → src/Components/SingleJeopardy/index.js

@@ -3,23 +3,12 @@ import QuestionItem from '../QuestionItem'
 import PlayerScore from '../PlayerScore'
 
 
-export default class Board extends Component {
+export default class SingleJeopardy extends Component {
 
   render() {
     return (
       <div className="container">
-        <form onSubmit={this.props.onSumbitPlayer}>
-          <div className="form-row">
-            <div className="col-2"></div>
-            <div className="col-6">
-              <input type="text" className="form-control" name="name" placeholder="Add a player" />
-            </div>
-            <div className="col-2">
-              <button type="submit" className="btn btn-primary">Add Player</button>
-            </div>
-            <div className="col-2"></div>
-          </div>
-        </form>
+
         <div className="row">
           <div className="col-2"><h5 align="center">Category 1</h5></div>
           <div className="col-2"><h5 align="center">Category 2</h5></div>

src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
+);