Current section: Client Router 27 exercises
Problem

History

Loading exercise

Transcript

00:00 You may have noticed that as you're navigating between these different places of state, the URL actually does get updated as you go forward and backward because the browser is managing that, but we are not made aware that the URL is changing. And so how could you deal with this?

00:16 Well, I suppose you could add a set timeout that just checks the URL and sees if it changes, or you could just use the platform. And we've got this pop state event that we can listen for whenever that history changes. So you simply add event listener on the window for pop state. That would be pop state. There we go.

00:35 And then to remove the event listener because we want to manage memory properly and stuff, then pop state here. The removal probably won't ever happen in the lifetime of your application unless you're doing something kind of strange, but it is important to keep it in there just to, you know, just in case. So the most important thing here is add event listener, handle pop state,

00:57 and when that pop state event happens, then we can go trigger another fetch call to go get the updated content and start a transition, all of that stuff that we were doing before. So let's, and before I let you go on this, there will be something kind of funny about this that we'll fix in the next step. So don't freak out if you're like, whoa, why is it doing that?

01:17 We'll make that better in the next step. But let's at least make it so that the UI gets updated whenever you're navigating back and forth in history. Let's go.