migrating to react router 4

react-router/rotas/.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

react-router/rotas/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-router": "^3.0.5"
+    "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
     "react-scripts": "1.0.7"

react-router/rotas/src/index.js

@@ -4,9 +4,5 @@ import App from './pages/App';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';
 
-import { Router, Route, hashHistory } from 'react-router';
-
-ReactDOM.render((
-<Router history={hashHistory}><Route path="/" component={App}></Route></Router>),
-    document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

react-router/rotas/src/pages/App.js

@@ -1,12 +1,26 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
 import logo from './logo.svg';
 import './App.css';
 
+import Home from './home'
+import About from './about'
+
 class App extends Component {
   render() {
     return (
-      <h1>Mostrando component</h1>
-    );
+      <Router>
+        <div>
+          <Link to='/'>Home</Link>
+          <Link to='/about'>About</Link>
+
+          <Switch>
+            <Route exact path='/' component={Home} />
+            <Route path='/about' component={About} />
+          </Switch>
+        </div>
+      </Router>
+    )
   }
 }
 

react-router/rotas/src/pages/about.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const About = () => (
+  <h2>About</h2>
+)
+
+export default About

react-router/rotas/src/pages/home.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Home = () => (
+  <h2>Home</h2>
+)
+
+export default Home