Now if you missed that last part in the last guide, all we did was add exact to this route right here.

Which basically allowed us to make it so when we visit results it only displays results. So in this guide we're going to make it so when we type in a query and hit return not only does it console log this but we also want to head to /results. So the way we're going to accomplish this is going to be through using react-router-dom of course and the way we can important this into our searchBar is by hitting return a couple of times at the top and saying import { withRouter } from 'reactor-router-dom';.

We did this a little differently in the last app. But I want to show you every different way or at least as many as I can. A bunch of different ways of doing things and this is one of them. So we're going to import with router from react-router-dom and then at the bottom we just have to say OK SearchBar is equal to with router and then pass in search bar.

searchBar.js

SearchBar = withRouter(SearchBar);

So basically all that withRouter is, is a high order component that has already been created by react-router-dom if you hit command click into that it will show you some of how it's built and you can go through that if you want.

I am not going to explain it but that's what I usually do when learning coding as I always command click into code that I didn't write just so I can understand at least a little bit of how it's written, and just a basic overview of it, and what you can do with it.

So that is right here export function withRouter and then yeah. So this is just the interface.h file if you've done any C++, so withRouter SearchBar. Now if we had to our application nothing is going to happen when we hit return we actually need to push to this. So in here we can just say this.props.history.push('/results'); let's save that and head back to the app and let's just go to localhost:3000 and type something in and hit return and you'll notice it takes us right to our route, right to results.

So we'll be done with that for now, later on we will have to implement a different way of doing this using callbacks so we can get our data properly and all that. So I'll show you how that works later. But for right now we know that's working and that's what we wanted, I'm going to get rid of the navigate to a new route. We're going to save it and I'm going to commit my code and push.

So say git status, git add ., git commit -m and I'm going to say "added exact route for home route" and again if you don't remember what I'm talking about. That is basically just this exact keyword here. And then I'm going to say "and implemented with router hoc" remember it's a higher order component into the search bar to navigate the user to the results component or results, okay let's get push get push origin master.

terminal

git status
git add .
git commit -m "added exact route for home route and implemented withRouter HOC into the searchbar to navigate the user to results route"
git push origin master.

and I'll see you in the next guide, where we will continue building out this application.

Resources

Source code