Warning: You cannot PUSH the same path using hash history

[impguard]

This is very similar to #2431, where I'm getting this warning.

Luckily, remix-run/history#43 seems to fix it in the general case, but I'm getting this warning in a very specific instance.

With a basic application with:

    <Router history={hashHistory}>
        <Route path='/' component={App}>
            <IndexRoute component={GettingStarted} />
            <Route path="reports" component={Reports} />
            <Route path="templates" component={Templates} />
        </Route>
    </Router>

The first time I load the application at http://domain-name/#/ and click on a Link to '/', I get this error. Afterwards, I never see it again.

Is this intended or did I set something up incorrectly?

[ryanflorence]

Seems like a weird warning. You can't really tell the user not to click links, and it'd be really cumbersome to make the link not link to anywhere when its active. Unless @mjackson has some reason I'm unaware of, we'd happily merge a PR that removes the warning and ship a release.

[mjackson]

The warning is there just to let you know that when you're using hash history, you can't actually PUSH the same path; the browser won't add anything to the history stack.

But you should only get this warning in development. If you generate your production build correctly (using NODE_ENV=production) you shouldn't see this warning in production.

[ryanflorence]

Can we just leave that to docs and not a warning?

[sloansparger]

If the warning stays, having a console.warn would be helpful. I thought I was doing something wrong, but this isn't really an error.

[eko24ive]

@mjackson any plans on changing it ?

[benwiley4000]

@ryanflorence @mjackson I'm pretty convinced this warning should go - even if it is development only, it adds a ton of noise for developers who want to distill down to real errors, and in some cases it's an annoying implementation hoop to jump through in order to avoid a redundant push. Since the history library is set up to ignore redundant pushes there's not really a need to issue a warning. If you ask me. 🙂

[timdorr]

It really should stay. It's very easy to miss that you're trying to push the same path and makes it hard to track down the error. Clicking something and nothing happening is a terrible and frustrating DX because there is nothing to trace.

[benwiley4000]

^ fair point I hadn't considered.

[arjunmehta]

I agree with @sloansparger, If it's a warning (which it says it is), then it should use console.warn(), not console.error()

[robcalcroft]

An error gives the message this will break the app, which it will not necessarily. The message is for debugging purposes.

[benwiley4000]

Hey - worth noting that if this were to change it would be a change to the history package, not react-router. History's warning messages all rely on the Facebook-inspired warning package. Seems like this should be a discussion of whether to use that package in the history module, and the canonical reason for keeping the red error message for warnings is that they offer stack traces, whereas console.warn does not.

[Up-cent]

Try this https://reacttraining.com/react-router/web/api/Link/replace-bool

[arjunmehta]

@benwiley4000 The stack trace argument is great! Seems the history module already has an issue filed: remix-run/history#488

In order to get a stack trace, all you need to do is wrap the warning with a new Error():

console.warn(
  new Error('Hash history cannot PUSH the same path; a new entry will not be added to the history stack')
);

I'm not quite sure why you'd need to use a package for something like this anyway. But I'd imagine there are reasons.

[benwiley4000]

Wow @arjunmehta - stealing that trick for the future!

[big-kahuna-burger]

you can really use replace property on Link component as suggested by @Up-cent.

Here is example on how you render multiple links while avoiding this warning if it's too annoying

const renderLinks = (currentPath) => {
  return <ul>
    {
      routes
        .map(({ path }, i) =>
          <li key={i}>
            <Link
              to={`/${path}`}
              replace={path === currentPath}>
              {title}
            </Link>
          </li>
        )
    }
  </ul>
}

routes is a array of something like [{path: 'Home'}, {path: 'About'}]