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

3

4 Answers

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

export default withRouter(Cars)

1

Try adding forceRefresh={true} to your BrowserRouter.

<BrowserRouter forceRefresh={true}>
2

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

2

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

David Miller

David Miller

Executive Financial & Market Analyst

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.

Share this article
Twitter Facebook Pinterest