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

BrowserRouter has an implicit history by default. You'd need to use Router instead. Reference: https://reacttraining.com/react-router/web/api/Router — Adriano, Jun 28 '17 at 19:32
Possible duplicate of [How to push to History in React Router v4?](https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4) — lux, Aug 14 '17 at 14:33
For React Router V4 you can this.context.router.history.push('/url'); — Parthipan Subramaniam, Sep 06 '18 at 12:31

score 17 · Answer 1 · answered Aug 14 '17 at 05:19

17

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

export default withRouter(Cars)

answered Aug 14 '17 at 05:19

Steven Daniel Anderson

1,435
2
11
17

4

The hoc `withRouter` was imported from `react-router` not `react-router-dom`. Check [withRouter](https://reacttraining.com/react-router/web/api/withRouter) for more information. – Slim Sep 20 '18 at 22:19

score 12 · Answer 2 · answered Oct 04 '17 at 08:58

12

Try adding forceRefresh={true} to your BrowserRouter.

<BrowserRouter forceRefresh={true}>

answered Oct 04 '17 at 08:58

Novia Lim

261
3
6

2

This probably isn't a good approach, but not sure why. – Android Apr 27 '21 at 23:26
Worked for me, @Android why do you think so ? – Santiago May 16 '22 at 14:26

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

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

edited May 23 '17 at 12:34

Community

1
1

answered Apr 07 '17 at 14:05

paul

57
3

Strange - that didn't work, even though my research gave me the same answer. I have found a solution but it seems wrong sowmehow. I have edited my post so make it clear. Maybe you know the explanation? – ST80 Apr 10 '17 at 11:00
7

I work with v4 and I don't have `this.context.history`. – Mikhail Batcer Jun 20 '18 at 15:29

score 0 · Answer 4 · answered May 14 '21 at 07:47

0

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)

answered May 14 '21 at 07:47

Codemaker2015

12,190
6
97
81

ReactJS Router V4 history.push not working

4 Answers4

Linked