reactjs - can not read property push of undefined

You need to change your route.js page to

import {Router, browserHistory} from 'react-router';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

And then everywhere you want to navigate you can use

 import {Router, browserHistory} from 'react-router';

 browserHistory.push('/');

The react-router docs encourage you to use browserHistory instead of hashHistory

hashHistory uses URL hashes, along with a query key to keep track of state. hashHistory requires no additional server configuration, but is generally less preferred than browserHistory.

With React router v4, you need to wrap the components in withRouter. Then you can access history in your components. Do the following:

import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);

In React Router v4, you no longer have to give a history to your router. Instead you just use BrowserRouter or HashRouter from 'react-router-dom'. But that makes it unclear how to push a rout to your history when you aren't in a react component.

The solution is to use the history package.

Just import createHistory like this:

import createHistory from 'history/createBrowserHistory'

Or the way I do it is like this:

import { createHashHistory } from 'history'

then create your history

export const history = createHashHistory()

and now you can push to it:

history.push('/page')

I hope this helps others who come to this question. None of the current answers gave me what I needed.

This may not be referring to above example but I had the same error. After lot of debugging I figured out that history is not reachable to my inner components. Make sure your history is reachable.

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component={Home}/>
        <Route path="/techMap" component={TechMap}/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= {this.props.history}/>
</div>

//techstack.js

<div>
    <span onClick={this.search.bind(this)}>
    </span>
 </div>
)

search(e){
 this.props.history.push('/some_url');
}

TechStack is my inner component.

Earlier I was able to get history in app.js but not in tech.js. But after passing props in form of history, I got the history in tech.js and routing works