Update react-router to the latest version 🚀 (#31)

* fix(package): update react-router to version 4.0.0

https://greenkeeper.io/

* use react-router v4

Author: greenkeeper[bot]

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
-    "react-router": "^3.0.0"
+    "react-router": "^4.0.0",
+    "react-router-dom": "^4.0.0"
   },
   "scripts": {
     "now-start": "cd build && serve -s ./",

src/About.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 class About extends Component {
   render() {

src/App.js

@@ -1,8 +1,21 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Switch,
+} from 'react-router-dom'
+import About from './About';
 import logo from './logo.svg';
 import './App.css';
 
+const NoMatch = ({ location }) => (
+  <div>
+    <p>No Match for <code>{location.pathname}</code></p>
+    <Link to='/'>go back</Link>
+  </div>
+)
+
 class App extends Component {
   render() {
     const secretCode = process.env.REACT_APP_SECRET_CODE;
@@ -17,10 +30,21 @@ class App extends Component {
         </p>
         <p>REACT_APP_SECRET_CODE: { !secretCode ? 'env not set yet' : secretCode }</p>
         <p><Link to='/about'>about us</Link></p>
-        {this.props.children}
       </div>
     );
   }
 }
 
-export default App;
+const BasicApp = () => (
+  <Router>
+    <div>
+      <Switch>
+        <Route exact path="/" component={App} />
+        <Route path="/about" component={About} />
+        <Route component={NoMatch} />
+      </Switch>
+    </div>
+  </Router>
+)
+
+export default BasicApp;

src/index.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, browserHistory, Link } from 'react-router'
 import App from './App';
-import About from './About';
 import './index.css';
 
-const NoMatch = () => (
-  <p>No Match <Link to='/'>go back</Link></p>
-)
-
-ReactDOM.render((
-  <Router history={browserHistory} >
-    <Route path="/" component={App} />
-    <Route path="/about" component={About}/>
-    <Route path="*" component={NoMatch}/>
-  </Router>
-), document.getElementById('root'));
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);