This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Keep Application State in Sync with Browser History

1:43 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Elad

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.

Avatar
Andrew Van Slaars

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!

In reply to Elad

Right now, whenever I click a link in the Application's Footer, it'll update the route and that'll in turn change the filtering of the TodoList. If I use the browser's Back button, we'll see that the address changes, but nothing happens with my filter here.

Active

I can go back through my previous states, and I can go forward and the address will keep changing, but my filter won't.

Complete

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 route state property is on this handleLinkClick. That's only going to happen when we click on one of the links in the Footer.

Router.js

handleLinkClick = (route) => {
    this.setState({route})
    history.pushState(null, '', route)
}

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.

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 arrow function. This is going to fire every time we use the Back or Forward button in the browser.

componentDidMount() {
    window.onpopstate = () => {

    }
}

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.

componentDidMount() {
    window.onpopstate = () => {
        this.setState({route: getCurrentPath()})
    }
}

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?