ReactJS Router V4 history.push not working

Question

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 :)

Answer 1

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

export default withRouter(Cars)