All language subtitles for 004 withRouter()_en

We just learned how to navigate through our application using the link component and the history property

that we get from Mauriac router dom.

Now, how would we actually go about setting up our menu item so that it allows us to navigate to different

pages?

More specifically, we want to use our has menu item to navigate to our new hats page.

Well, one of the caveats of using those properties that we get from route, which is the match, the

history and the location property, is that we actually only get access to them from the first component

that gets passed into our route.

So even though directory and.

Menu item, our children of our home page component, only our home page component gets access to the

history propp that we need because it's the home page component that we're passing into root.

So Raoh only passes it one child in which is its child.

So our home page.

One solution we could do is we could pass these props down into our directory, we could pass the history

into our directory, and then we can pass that history from our directory down into our menu item.

This props taught history, and by doing so, our menu item now has access to the history and its props.

The problem with doing it this way is that this is actually a bad pattern called prop tunneling, because

we're tunneling these props, multiple children deep in order to get them to the component that needs

them.

But the children in between don't actually need the history property for any reason other than to pass

it to their children.

Now, luckily, there's a solution that recruiter Dom provides us that allows us to not have to do this.

So let's take a look.

So first, let's undo.

That.

Prop tunneling code that we just wrote.

We don't need that either.

And what we're going to use is actually a nother component from react router dom, and this component

is called with the router.

Now, what with router is is it's a higher order component and a higher order component is essentially

a function that takes a component as an argument and we're turned you a modified component.

So just like how our menu item is a function that takes props and renders out a component, a higher

order component is a function that takes any component and modifies it in some way and then returns

you that new modified component.

So it's kind of like a function that gives you back a powered up component in this case, where powering

up our menu item component to have access to those things related to our router.

So what we would do is we just pass our ups, not history, we just pass our menu item component into

this with Rueter.

And with Rueter will then return us back with the same name of this menu item, right, what we're whatever

it is that we're exporting by default, it will return us back a super powered menu item component with

access now to those location match and history props that we need access to.

So by wrapping now, we now have access to history.

And what we want to do with history is we want to wrap our whole div items so that on unclick.

We're going to push.

History not push.

To some Yoro.

Now, how do we do this?

Well, what we want to be able to do is have these you are al IDs almost be dynamically generated as

well.

Because we know that where we're going is going to be the hats page, so we know that our route needs

a hats route, right.

So what we can do for now, just to hardcoded, is we can go into our directory component.

And add a neutral parameter here, like a link of sorts, right link URL.

And we're just going to set this to hats.

So after this, we want to add the same value, but to every other section, but for now, we'll just

keep it as an empty string because we don't actually have those other routes set up yet.

Now we're going to pass this link, you are all into our menu item.

And it is on our section, right, that we're mapping through, but because we're at we're getting more

and more verbose, it's very easy for us to just do this again.

Link you URL.

And then to pass it in as link you all, but you'll notice that these keys that were structuring off

are essentially equivalent to the exact same property name that we're also passing in to our menu item.

So there's actually a little yes.

Six trick we can do by spreading the rest of these values together that we don't need for key because

ID we're not actually passing it as ID, we can remove that.

And then set the rest of them as section props or other section props.

And now we can spread those values in like this.

And this is equivalent to us writing out what we did before by spreading these values through, we're

saying that every other key value pair we want to pass in where the key of title goes to the value of

men's.

So this is equivalent to us having done that.

And now in our menu item, we will have access to the link URL.

Which we now want to push.

However, we also don't know in our menu item where in our directory we will be, so what we can do

is we can take the match.

As well.

And just like in our demonstration earlier, we can do match dot you URL.

Into.

Link Yoro.

And now if we save this.

We should see if we click our hats page, it navigates us to our hearts page and if we were to change

our You URL at any point, our component is still fully aware and functional because it knows that it's

just going to base where it's been matched up to and then append the URL.

And with that, we have some basic navigation setup inside of our menu item component.

So now with this in mind.

Let's commit our code.

So let's see what we have to commit.

So we have to now.

Update our menu items.

To navigate.

With.

Rueter, HHC.

Now we're going to explore this concept of higher order component further a little later when we write

our own, but for now, just remember, our higher order component is just a function that takes another

component as an argument, transforms it into another component, and returns that transformed component

out of itself.

So we'll definitely explore that further.

But for now, just think about it simply like that.

So let's get Push or jam master our code.

And let's move on to the next lesson.