00:00 So now we're going to make our client-side router. A lot of this stuff is already done for you because I want you to focus mostly on, like, re-requesting the new data and things. But, yeah, we're going to be implementing the navigate function for a router. We're going to be putting some of our content in state, our current

00:18 location goes in state. So lots of things you need to think about when you're considering we need to update the React server components. So the interesting thing here is that all of this stuff came from server components. This came from server components. And when we do a search here, that refreshes the page.

00:36 And so that's why it technically works, but it's not a great user experience. So I want to make it, by the end of this exercise, so that as you make changes to the input, that's going to trigger navigations. But I don't want those navigations to appear in my history because that would just be like, we'd have a million back buttons

00:54 and every back button would just change one of the items in that input field or one of the characters. And so we're going to be using the replace state API for that. But then for, like, every one of these clicks, I want to be able to go back on our history state and

01:12 that should do what you expect. So we're getting full page refreshes right now. It would be better to use the history push state API so that we don't have to do full page refreshes. Now, the forward and backward buttons actually are not going to work until we get to handling pop

01:30 state in a future exercise step. And so really by the end of this exercise, you should be able to just click on one of these, not get a full page refresh, and instead go and reload the content. So you're going to make another fetch request, create from fetch, all that stuff. And we also have a special

01:48 hook that's going to turn all of our anchors into prevent default and all of that stuff, but they will properly navigate. And also the search is going to need an on change. So you've got a couple of things there. Let's just talk really quickly about some of the utilities we have. So in this

02:06 exercise, we're just going to be using merge location state. This is an implementation for this specific app. And what this does is it's going to take a given location, our current location, and it's going to merge different aspects of it. So this is our ship ID.

02:24 Here's our search params. And so you can override the search params in this way, or you can override the ship ID by providing the ship ID. So very specific to our application, but you're going to use that to navigate to the next place. So you'll pass the current location to merge location

02:42 state, give your overrides, and then this is the updated URL that we're going to navigate to. So you'll be moving things into state. You'll be implementing a navigate function, and then you'll go to a couple of places to call that navigate function with this utility. So that should be enough for you to get going on with.

03:00 So let's get going on.