ReactJS Router V4 history.push not working

I have upgraded to React Router V4 and now struggling with the history.push method.

I have an index.js file:

import React from "react"; import { render } from "react-dom"; import { BrowserRouter, Route } from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; const history = createBrowserHistory(); import { Main} from "./components/Main"; import { About } from "./components/About"; import { Cars} from "./components/Cars"; class App extends React.Component { render() { return ( <BrowserRouter history={history}> <div> <Route path={"/"} component={Main} /> <Route path={"/cars"} component={Cars}/> <Route path={"/about"} component={About}/> </div> </BrowserRouter> ) } } render(<App/>, window.document.getElementById("app")); 

And then I have another file, where I added a simple to return to a certain page which looks like this:

import React from "react"; import createBrowserHistory from 'history/createBrowserHistory'; const history = createBrowserHistory(); export class Cars extends React.Component { navigateBack() { history.push('/') } render() { return( <div> <h3>Overview of Cars</h3> <p>Model: </p> <button onClick={this.navigateBack} className="btn btn-primary">Back</button> </div> ) } } 

So, I cannot figure out whats going wrong here. When I click on the button, the URL changes to / but thats all. Is there someone who can help me out?

EDIT

I found out, that it works when I do this:

this.props.history.push('/home') 

and

<button onClick={this.onNavigateHome.bind(this)} 

but it seems wrong somehow??

when I do

this.context.history.push('/home') 

I get Cannot read property 'context' of null but why?? Is my <BrowserRouter> setup wrong??

Anyway, thanks for the help :)

4 Answers

You have to import {withRouter} from 'react-router-dom' and export your class in this way

export default withRouter(Cars)

Try adding forceRefresh={true} to your BrowserRouter.

<BrowserRouter forceRefresh={true}> 

With v4 you have to use this.context.history.push('/cart');
check out these posts for more insights:

How to push to History in React Router v4?

history.push not working when using BrowserRouter

Try to use history from props and ensure that your export is wrapped with withRouter.

Ex:

this.props.history.push('/test') export default withRouter(TestComponent)