react-router: history.push not rendering component in Router

Version

"react-router-dom": "^5.2.0",

Test Case

For some peculiar reason this bug is not reproducible on CodeSandbox, please clone https://github.com/riwu/react-router-dom-bug instead.

import React from "react";
import { Router, Route } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Route
        exact
        path="/"
        component={() => (
          <button onClick={() => history.push("/2")}>click</button>
        )}
      />
      <Route path="/2" component={() => "page 2"} />
    </Router>
  );
}

Steps to reproduce

git clone https://github.com/riwu/react-router-dom-bug.git
yarn install
yarn start
Click the “click” button.

Expected Behavior

“page 2” should be rendered.

Actual Behavior

blank page is rendered.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 37 (4 by maintainers)

Most upvoted comments

I resolved this issue by ensuring my version of history was the same as used by react-router:

$ yarn list history
yarn list v1.13.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ history@5.0.0
├─ react-router-dom@5.2.0
│  └─ history@4.10.1
└─ react-router@5.2.0
   └─ history@4.10.1

$ yarn add history@4.10.1

+74

cdosborn on Jul 2, 2020

I had the same issue, after checking this https://medium.com/@shoaibbhimani1392/react-router-frequently-faced-problems-f7d30d02087e it was still failing. I had history@5.0.0 and react-router-dom@5.2.0 and after moving history to version 4.10.1 it worked.

+58

elenarojas on Jul 2, 2020

I had the same problem and can confirm that this is a bug with history 5.x. It works with history 4.x i.e. after i run “npm uninstall history” and “npm install history@4.10.1”

NiklasRz on Aug 18, 2020

Your example code doesn’t have react-router used in it anywhere. But like it was pointed out, you have to use history 4.x with React Router 4.x/5.x. History 5.0 is not compatible.

timdorr on Jul 2, 2020

@piyushjha97 you may try ensuring that the call to history.push does not happen during rendering by wrapping it in a useEffect.

cdosborn on Aug 7, 2020

Thank you for your response @cdosborn . I am using class component and most importantly I uninstalled version 5 and installed version 4 of npm history then it is working normally.

piyushjha97 on Aug 7, 2020

@timdorr why is this tagged support? I have outlined the steps to show that it’s a reproducible bug with the library.

riwu on Jun 15, 2020

I resolved this issue by ensuring my version of history was the same as used by react-router:

$ yarn list history
yarn list v1.13.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ history@5.0.0
├─ react-router-dom@5.2.0
│  └─ history@4.10.1
└─ react-router@5.2.0
   └─ history@4.10.1

$ yarn add history@4.10.1

This is a common major problem! This was hard to find!

So everybody that install the latest version of react-router-dom and history will need to find this comment and match the versions?

This is not a support matter! This is something to be fixed! Oh gosh!

FerJSsilva on Aug 9, 2021

I had the same issue, after checking this https://medium.com/@shoaibbhimani1392/react-router-frequently-faced-problems-f7d30d02087e it was still failing. I had history@5.0.0 and react-router-dom@5.2.0 and after moving history to version 4.10.1 it worked.

This worked for me

BenReichwein on Feb 24, 2021

see #7506 (comment)

I see this issue is closed, but is this issue being acknowledged?

actuallymentor on Sep 21, 2020

@elenarojas thanks for the info. I have opened a new issue since timdorr mistagged this as support and refuses to reopen for some reason.

riwu on Jul 2, 2020

I experienced same issue now. The URL changed to the supposed history.push(“/myURL”), however, the page is not rendering the component.

Any thoughts about this? I am using Router not the BrowserRouter

eebasadre20 on Jun 28, 2020