reactJS history push returns an error

Question

Hi in my reactJS application I use this

this.props.history.push("URL");

to redirect to another page or to the same page when I want to reload the page.

But I got this error:

Hash history cannot PUSH the same path; a new entry will not be added to the history stack

how can I solve this issue?

thanks in advance

check this question https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4 — Suresh Ponnukalai, Mar 16 '18 at 06:52
Is it warning or an error? Seems like warning to me. If I'm not mistaken, the warning is shown only on dev mode but not in production. Just check if new location is the same as current one `const {history} = this.props; if(history.pathname !== newPath) history.push(newPath);` — Eduard Jacko, Jul 12 '18 at 07:38

score 4 · Accepted Answer · answered Jul 12 '18 at 10:09

4

I think you are looking for this

   this.props.history.push({
         pathname: "URL"
      })

answered Jul 12 '18 at 10:09

Adnan

1,589
11
17

score 2 · Answer 2 · answered Mar 28 '19 at 19:40

2

You can use

if (history.location.pathname !== somePath) history.push(somePath);

Here somePath could be any url. In react-router-4, pathname can be accessed like

  this.props.history.location.pathname

answered Mar 28 '19 at 19:40

Ashu

51
3

score 0 · Answer 3 · answered Jul 12 '18 at 09:12

You can use replace prop. When replace prop is true, clicking the link will replace the current entry in the history stack instead of adding a new one. To get current pathname use props.location.

<Link replace={to === location.pathname} to={to}><Button>{to}</Button></Link>

You can create higher order function and wrap your <Link> in it. So you can use it as

<NavLink to="{to}"></NavLink>

Here is tutorial and example (my blog)

reactJS history push returns an error

3 Answers3