React-router: Components don't re-render when hash location changes

[mzabriskie]

When my route changes from /user/123 to /user/456 my handler doesn't update to reflect the new user ID.

[mzabriskie]

This is not actually an issue, just a misunderstanding of how the router works. The component doesn't get re-initialized and componentWillMount does not get called when the route changes. You have to leverage componentWillReceiveProps. See the master-detail example https://github.com/rackt/react-router/blob/master/examples/master-detail/app.js#L155

[ryanflorence]

Some links worth noting:

• https://github.com/rackt/react-router/commit/2a85b74
• https://github.com/rackt/react-router/issues/97
• https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#important-note-about-dynamic-segments
• https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md#addhandlerkey

If you read #97 you can see my worry that people would get confused, but hopefully they will find this ticket when they start googling.

[alansouzati]

I'm facing a similar issue:

I access a URL, for example:

http://localhost:900/test

I click in an anchor link, so the URL changes and my page scrolls to the anchor, so far so good.

http://localhost:900/test#my-anchor

Now, i press the back button in the Browser, the location changes back to http://localhost:900/test but the page does not scroll back to the top.

Any ideas what's going on?

I'm using react-router 0.13.4

[alansouzati]

Never mind folks, the problem was with my CSS overriding the default browser behavior with position absolute and overflow hidden.

[knowbody]

@alansouzati yeah the back button takes you back to the place where you came from, that's the expected behaviour.

If you want to scroll back to the top you need to handle it yourself. (window.scrollTo(0, 0))

[droarty]

This may just be an update of the broken link above but an excellent resource is the LifeCycle explanation in react-router's docs: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

[alexwakeman]

The fact that hash changes don't trigger a render is extremely counter-intuitive and indicative of design flaws in this router. I am now resorting to building my own router.

[taion]

Hash changes do trigger a render, BTW.

[JohnnyFun]

fwiw, I ran into the same thing. It came down to me being confused that a nested component wasn't having it's componentWillReceiveProps called. That was happening because I wasn't using all the way down.

Once I wrapped components in that who needed to do routing stuff, all was well in the land of code.

Nice work on this router guys--really makes decoupling routing from UI slick. Much appreciated.