Keep React Application State in Sync with Browser History
Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.
[00:00] Right now, whenever I click a link in the Applications footer, it'll update the route and that'll in turn change the filtering of the to-do list. If I use the browser's Back button, we'll see that the address changes, but nothing happens with my filter here. I can go back with my previous states, and I can go forward and the address will keep changing, but my filter won't.
[00:21] Let's take a look at our router component and see why that is. I'm going to open up router.js. We'll see that the only time we set the RouteState property is on this handle link click. That's only going to happen when we click on one of the links in the footer.
[00:36] In order to update the state when the Back and Forward buttons are used, we'll need to register an event handler for the onpopstate event. We'll do this in the componentDidMount life cycle method.
[00:45] I'm going to scroll down just above the render method and I'm going to add the componentDidMount method. I'll add window.onpopstate and I'll set that to equal an error function. This is going to fire every time we use the Back or Forward button in the browser.
[01:04] All I want to do here is I want to redefine our route, I'll use this.setState. Passing it the route key. Then, I need to get the current location, I'm going to use the GetCurrentPath function that we have for our initial state and with that defined I'll save this and let the browser reload.
[01:30] Now, I'll come into the browser. I'll use the link a few times and I'll hit the Back button, and we'll see that now everything gets updated and the filters work even with the Back and Forward buttons.
Elad,
In a larger scale application, I would absolutely advise using React Router. One of the goals of this course was to avoid adding additional dependencies outside of the build setup that comes with Create React App. This was a good way to introduce topics like context and the browser's pushState API so when you use something more full featured like React Router, you have a sense of what's happening under the hood and it's less "magic".
There is a full course on React Router available here: Getting Started with React Router.
Thanks for the question and I hope this helps!
Hi,
I was wondering why aren't we using react-router? - seems useful to know this package and save time implementing routers in the future.