add react-router-dom

Author: jerryni

package.json

@@ -6,6 +6,7 @@
     "prop-types": "^15.6.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
+    "react-router-dom": "^4.2.2",
   },
   "devDependencies": {
     "eslint": "^3.19.0",

src/App.jsx

@@ -1,52 +1,29 @@
 import React from 'react'
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom'
 import './App.css'
 import FilterableProductTable from './modules/FilterableProductTable.jsx'
 import ToDoList from './modules/ToDoList.jsx'
 
 class App extends React.Component {
-  state = {
-    currentComponent: 'FilterableProductTable'
-  }
-
-  components = {
-    FilterableProductTable: FilterableProductTable,
-    ToDoList: ToDoList
-  }
-
-  handleDemoClick(componentName) {
-    this.setState({
-      currentComponent: componentName
-    })
-  }
   render() {
-    let lis = [],
-      CurrentComponent
-
-    CurrentComponent = this.components[this.state.currentComponent]
-
-    Object.keys(this.components).forEach((componentName) => {
-      let name
-
-      name = this.state.currentComponent === componentName ? 
-        (<span style={{color:'green'}}>
-          {componentName}
-        </span>) : componentName
-
-      lis.push(
-          <li
-            onClick={this.handleDemoClick.bind(this, componentName)}
-            key={componentName}>{name}</li>
-      )
-    })
-
     return (
-      <div id="app">
-        <h1>Demos</h1>
-        <ul>
-          {lis}
-        </ul>
-        <CurrentComponent />
-      </div>
+        <Router>
+            <div>
+                <ul>
+                    <li><Link to="/">FilterableProductTable</Link></li>
+                    <li><Link to="/todos">ToDoList</Link></li>
+                </ul>
+
+                <hr/>
+
+                <Route exact path="/" component={FilterableProductTable}/>
+                <Route path="/todos" component={ToDoList}/>
+            </div>
+        </Router>
     )
   }
 }