This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Fixing Routing" Lesson
[00:00:00]
>> Brian Holt: One more thing that we need to do before we wrap up context, we wanna make it so if you're on,
>> Brian Holt: SearchParams.
>> Brian Holt: Right now this Submit button doesn't work cuz we're not passing anything in here, right? So the way we're gonna make that work is if you go over to SearchParams.
[00:00:26]
>> Brian Holt: All we need to do is we need to make this navigate to the results page whenever we click Search, right? Luckily, this is actually pretty easy to do. So I'm gonna do handleSearchSubmit here.
>> Brian Holt: And this doesn't even have to be an arrow function. And I'm just gonna say navigate, and I'm gonna pull this in from reach/router, which you can see here on line 3 that I imported it.
[00:00:56]
>> Brian Holt: navigate('/'). navigate is something that reach/router exports for you so you can programmatically redirect people.
>> Brian Holt: Because everything's being stored via context in app, it's going to live across navigation. So we don't have to submit any data like that. It's already living up in the app parent, right?
[00:01:20] So it survives this navigation.
>> Brian Holt: So now that we do this, we have to pass it into SearchBox, so search=this.handleSearchSubmit.
>> Brian Holt: Again, if we go to the SearchParams,
>> Brian Holt: And do cat,
>> Brian Holt: Balinese and Submit, it takes us to the results page with all that filled out, right?
[00:01:49] Because it's that, the true context, that data's being stored in the app and then passed back into the results page, which is using it for the search.
>> Brian Holt: Let's go do one more thing.
>> Brian Holt: On the app.js page, let's just make it so you can navigate to that page so you don't actually have to URL hack to get to there.
[00:02:16]
>> Brian Holt: So here where it says header,
>> Brian Holt: We're gonna put another link.
>> Brian Holt: link to="/search-params".
>> Brian Holt: Then here we're gonna put a span with an aria-label equal to search. role= "img". And,
>> Brian Holt: Then I'm going to put a, you can put an emoji there. So what do I call that spot, or eyeglass?
[00:03:02]
>> Brian Holt: I forgot what it's called.
>> Brian Holt: Frequently Used, yeah, this one, left pointing magnifying glass. How could I not remember that?
>> Brian Holt: So I'm just gonna put an emoji there till I correct it. Show that you can navigate to that. So how do we put emojis in on Windows, I don't know how to do that.
[00:03:29] But in Mac, it's Ctrl/Cmd space will bring up this thing and you can just find left pointing.
>> Brian Holt: It was here, this one, left pointing magnifying glass. Or put a happy face there, up to you. Talking about the span here for a second. So we have to let screen readers know that like this is an image, which is what the real image is, right?
[00:03:58] Because this we're using this emoji as an image. And then we have to give it a label to let the screen reader know. If someone taps over this, what is it? And this will take you to the search page. So if they hit Enter on it, it will take them to the search page.
[00:04:17]
>> Brian Holt: And in fact, if I take this away, it's gonna yell at me. Hey, emojis need to be wrapped in spans, by the way.
>> Brian Holt: So just good practice, good accessibility practices. So now if you come in here, you'll see this little thing up here in the top right.
[00:04:35] And you can click, it will take you to the SearchParam's page.
>> Brian Holt: Which is kind of fun.
>> Brian Holt: Okay,
>> Brian Holt: So there's a commit there at the bottom of the context page if you need to catch up.