Adaptation for version react-router-dom 4.2.0

package.json

@@ -4,15 +4,16 @@
   "private": true,
   "homepage": "https://daxchen.github.io/material-ui-Link-within-MenuItem",
   "devDependencies": {
-    "gh-pages": "^0.12.0",
-    "react-scripts": "0.9.0"
+    "gh-pages": "^0.12.0"
   },
   "dependencies": {
-    "material-ui": "^0.17.4",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-router": "^3.0.2",
-    "react-tap-event-plugin": "^2.0.1"
+    "material-ui": "^0.20.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "^1.1.4",
+    "react-tap-event-plugin": "^3.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,69 +1,77 @@
 import React, { Component } from 'react'
-import { Link } from 'react-router'
+import { HashRouter as Router, Route, Link } from 'react-router-dom'
 import AppBar from 'material-ui/AppBar'
 import Drawer from 'material-ui/Drawer'
 import MenuItem from 'material-ui/MenuItem'
 import RaisedButton from 'material-ui/RaisedButton'
+import Home from './components/Home'
+import About from './components/About'
 
 class App extends Component {
 
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       open: false
     }
   }
 
-  toggleDrawer = () => this.setState({ open: !this.state.open })
+  toggleDrawer = () => this.setState({ open: !this.state.open });
 
   render() {
     return (
-      <div>
-        <AppBar
-          title="Title"
-          iconClassNameRight="muidocs-icon-navigation-expand-more"
-          onLeftIconButtonTouchTap={this.toggleDrawer}
-        />
+        <Router>
+          <div>
+            <AppBar
+                title="Title"
+                iconClassNameRight="muidocs-icon-navigation-expand-more"
+                onLeftIconButtonClick={this.toggleDrawer}
+            />
 
-        <Drawer
-          docked={false}
-          width={300}
-          onRequestChange={this.toggleDrawer}
-          open={this.state.open}
-        >
-          <AppBar title="Title" onLeftIconButtonTouchTap={this.toggleDrawer} />
-          <MenuItem
-            primaryText="home"
-            containerElement={<Link to="/" />}
-            onTouchTap={() => {
-              console.log('going home')
-              alert('going home!')
-              this.toggleDrawer()
-            }}
-          />
-          <MenuItem
-            primaryText="about"
-            containerElement={<Link to="/about" />}
-            onTouchTap={() => {
-              console.log('about')
-              alert('going to about page!')
-              this.toggleDrawer()
-            }}
-          />
-        </Drawer>
+            <Drawer
+                docked={false}
+                width={300}
+                onRequestChange={this.toggleDrawer}
+                open={this.state.open}
+            >
+              <AppBar title="Title" onLeftIconButtonTouchTap={this.toggleDrawer} />
+              <MenuItem
+                  primaryText="home"
+                  containerElement={<Link to="/" />}
+                  onTouchTap={() => {
+                    console.log('going home')
+                    alert('going home!')
+                    this.toggleDrawer()
+                  }}
+              />
+              <MenuItem
+                  primaryText="about"
+                  containerElement={<Link to="/about" />}
+                  onTouchTap={() => {
+                    console.log('about')
+                    alert('going to about page!')
+                    this.toggleDrawer()
+                  }}
+              />
+            </Drawer>
+            <div style={{ textAlign: 'center' }}>
+              {this.props.children}
 
-        <div style={{ textAlign: 'center' }}>
-          {this.props.children}
+              <RaisedButton
+                  label="Toggle Drawer"
+                  onTouchTap={this.toggleDrawer}
+                  style={{marginTop: '3%'}}
+              />
 
-          <RaisedButton
-            label="Toggle Drawer"
-            onTouchTap={this.toggleDrawer}
-          />
-        </div>
+              <Route exact path='/' component={Home}/>
+              <Route path='/about' component={About}/>
+            </div>
 
-      </div>
+
+          </div>
+        </Router>
     )
   }
 }
 
-export default App
+export default App;

src/index.js

@@ -1,28 +1,23 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, hashHistory } from 'react-router'
+import { HashRouter } from 'react-router-dom'
 import injectTapEventPlugin from 'react-tap-event-plugin'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 
 import App from './App'
-import Home from './components/Home'
-import About from './components/About'
 import './index.css'
 
-injectTapEventPlugin()
+injectTapEventPlugin();
 
 const Root = () => (
-  <MuiThemeProvider>
-    <Router history={hashHistory}>
-      <Route path="/" component={App}>
-        <IndexRoute component={Home} />
-        <Route path="about" component={About} />
-      </Route>
-    </Router>
-  </MuiThemeProvider>
-)
+    <MuiThemeProvider>
+      <HashRouter>
+        <App />
+      </HashRouter>
+    </MuiThemeProvider>
+);
 
 ReactDOM.render(
-  <Root />,
-  document.getElementById('root')
-)
+    <Root />,
+    document.getElementById('root')
+);