title: Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
body: <p>I have a <strong>Dashboard</strong> with rotating slides, each of which has a corresponding tab in <strong>Bldgs</strong>. Both <code>Dashboard.js</code> and <code>Bldgs.js</code> are children to my <code>App.js</code>.</p>
  
  <p>When a user clicks on a specific slide <code>A</code> in <code>Dashboard.js</code>, <code>Dashboard</code> needs to tell <code>App.js</code> so that <code>App</code> can tell <code>Bldgs.js</code> to have tab <code>A</code> displayed when it routes to <code>Bldgs</code>.</p>
  
  <p>I <em>believe</em> that I am passing the correct index value from <code>Dashboard</code> up to <code>App</code> and down to <code>Bldgs</code>. However, an error is being thrown in my <code>App.js</code> file stating:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'push' of undefined</code></p>
  
  <p>My code was working fine before I started passing my <code>handleClick()</code> function to my <code>Dashboard</code> component.</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import './index.css';
  import injectTapEventPlugin from 'react-tap-event-plugin';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import { BrowserRouter as Router } from 'react-router-dom';
  import { hashHistory } from 'react-router';
  
  // Needed for onTouchTap
  // http://stackoverflow.com/a/34015469/988941
  injectTapEventPlugin();
  
  ReactDOM.render(
    &lt;MuiThemeProvider&gt;
      &lt;Router history={hashHistory}&gt;
        &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/MuiThemeProvider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Route } from 'react-router-dom';
  import Dashboard from './Dashboard';
  import Bldgs from './Bldgs';
  
  var selectedTab;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
      selectedTab = 0;
    }
  
    handleClick(value) {
      selectedTab = value;
      // console.log(selectedTab);
      this.props.history.push('/Bldgs');
      // console.log(this.props);
    }
  
    render() {
      var _this = this;
  
      return (
        &lt;div&gt;
          &lt;Route exact path="/" render={(props) =&gt; &lt;Dashboard {...props} handleClick={_this.handleClick} /&gt;} /&gt;
          &lt;Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Dashboard.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './Dashboard.css';
  import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
  ...
  
  var curIndex;
  
  class Dashboard extends Component {
    constructor(props) {
      super(props);
      this.handleEnter = this.handleEnter.bind(this);
      this.handleChange = this.handleChange.bind(this);
      curIndex = 0;
    }
  
    handleEnter(e) {
      // console.log(curIndex);
      this.props.handleClick(curIndex);
    }
  
    handleChange(value) {
      // console.log(value);
      curIndex = value;
    }
  
  ...
  }
  
  export default Dashboard;
  </code></pre>
  
  <p><strong>Bldgs.js</strong></p>
  
  <pre><code>...
  var curTab;
  
  class Bldgs extends Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.goHome = this.goHome.bind(this);
      curTab = 0;
    }
  
    handleChange(value) {
      this.setState({'selectedTab': value});
      console.log(this.state);
    }
  
    goHome(e) {
      this.props.history.push('/');
    }
  
  ...
  }
  
  export default Bldgs;
  </code></pre>