"Navigating Outside of Components" - Invalid Example or Title of Article

[netpoetica]

In the documentation for "Navigating Outside of Components", the author recommends using browserHistory.push to redirect to another route. However, this will not actually trigger react-router to go to the new route - it will just push it into the browser history and change the URL bar without redirecting. Is this intentional?

My expectation is that this example would show you something more like router.redirect('/'), etc.

[netpoetica]

I think the intention of that documentation is to illustrate something more like this.context.router.push. Maybe it's time to ditch the guides and just rely on API docs so they can stay consolidated?

[timdorr]

This is correctly documented. The exported browserHistory object is a singleton, so you can use it wherever. You provide the same object to your <Router>, so that it listens to the same history events and updates the routes accordingly.

[timdorr]

You can see that this.context.router.push comes from the history object itself: https://github.com/rackt/react-router/blob/master/modules/RouterContext.js#L45

browserHistory.push and this.context.router.push are the same function.

[netpoetica]

I see. I can't understand what this article is attempting to illustrate then - why would you want to push something onto the browser history, but not actually trigger a route change? When you call browserHistory.push, you can watch the URL bar change but the route doesn't trigger a new view. When you call this.context.router.push, the router does trigger a new view.

It is possible that this is just a bug in my application - I will try to create a use case to illustrate. But from what I can see, if I am on /home and call browserHistory.push('/'), it will change the URL bar, but the Route for / will not be rendered. However, if I call this.context.router.push('/'), the Route for / will render.

[timdorr]

When you call browserHistory.push, you can watch the URL bar change but the route doesn't trigger a new view.

That's not true. This works as expected, assuming you're using React Router 2.0. The singletons didn't exist in 1.0 or earlier. Make sure you're using the 2.0 version we released last night.

[netpoetica]

@timdorr Thank you - I was using the rc5 version of react-router 2.0.0 and having this issue. I have upgraded to react-router 2.0.0 and still observe the same behavior.

If I am on http://localhost:3000/home

import { browserHistory } from 'react-router';
// some ajax callback
function(){
      browserHistory.push('/');
}
// now I am still seeing home, but url bar says http://localhost:3000/

I will isolate react-router and verify this isn't an issue with my application.

[netpoetica]

I think / am almost sure this is actually a middleware issue having to do with the fact that the boilerplate app I used is bypassing react-router browserHistory and using an external history. Sorry to bug you about it!

[paufabregat]

Sharing this in case it may be helpful for somebody:

I was experiencing a similar behaviour as the one described by @netpoetica. In my case I am using hashHistory in the application so I had to use hashHistory.push('/some/path')instead of browserHistory. This was not really obvious but of course it made a lot of sense.

It may be worth to add to the documentation that hashHistory has the same feature.