title: React JS Cannot read property 'location' of undefined
body: <p>This is my first time use <code>React JS</code>, I stuck with this error, </p>
  
  <p>I am trying to learn react router from this <a href="https://www.youtube.com/watch?v=1iAG6h9ff5s" rel="nofollow noreferrer">video</a>
  also watched it multiple times, but I still can't find and solve the problem:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
        "name": "cobareact",
        "version": "1.0.0",
        "description": "app pertama react",
        "main": "index.js",
        "scripts": {
          "start": "webpack-dev-server --hot"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "babel-core": "^6.24.1",
          "babel-loader": "^7.0.0",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "history": "^1.17.0",
          "react": "^15.5.4",
          "react-dom": "^15.5.4",
          "react-router": "^4.1.1",
          "react-router-dom": "^4.1.1",
          "webpack": "^2.5.1",
          "webpack-dev-server": "^2.4.5"
        },
        "devDependencies": {
          "webpack": "^2.5.1"
        }
      }
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route, IndexRoute, hashHistory } from 'react-router';
  
  import App from './App.jsx';
  import About from './About.js';
  import Add from './Add.js';
  
  ReactDOM.render(
      &lt;Router history={hashHistory}&gt;
          &lt;Route path='' component={App}&gt;
              &lt;IndexRoute component={About}&gt;&lt;/IndexRoute&gt;
              &lt;Route path='about' component={About}&gt;&lt;/Route&gt;
              &lt;Route path='add' component={Add}&gt;&lt;/Route&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;, 
      document.getElementById('app')
  );
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import ButtonAdd from './ButtonAdd';
  import ButtonAbout from './ButtonAbout';
  import Contacts from './Contacts';
  import { Link } from 'react-router';
  
  class App extends React.Component{
     render() {
        return (
          &lt;div&gt;
              &lt;div&gt;
                 {this.props.children}
                 &lt;div&gt;&lt;Link to="add"&gt;&lt;ButtonAdd /&gt;&lt;/Link&gt;&lt;Link to="about"&gt;&lt;ButtonAbout /&gt;&lt;/Link&gt;&lt;/div&gt;
                 &lt;h1&gt;Contact Book&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div&gt;
                 &lt;Contacts lists={CONTACTS} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
     }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>error</strong></p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'location' of undefined`enter code here`
  </code></pre>
  
  <p><strong>warning</strong></p>
  
  <p>Warning: Failed prop type: The prop <code>history</code> is marked as required in <code>Router</code>, but its value is <code>undefined</code>.
      in Router</p>