Search code examples
javascriptreactjsbrowser-history

Rerendering React.js When Browser Location Changes

I have a single page application using React.js. When viewing new content, only certain elements on the page are being updated via React. When this happens, I manually do the following (starting from the root location): 

window.history.pushState(null, null, "/page2");

to update the browser location. However, when I click back, the url goes back to the previous url (i.e. "/") but the page doesn't update.

How do I listen for changes to the browser navigation (back/forward buttons) and rerender according to the updated URL?

Solution

  • You can use react-router.

    Pete Hunt uses director.js (sorry, can't post the url due to low reputation), which you can see in the ReactJS TodoMVC example here in lines 29-34.