We're not going to start to implement some navigation into our app now just you know, we're going to
go through a step by step incremental approach to implementing navigation.
So the first thing that we're going to do here is not going to be the exact correct way of navigation.
Instead, I want to kind of naturally lead you into a final, appropriate solution that we would use
inside of a typical app.
Long story short, let's just build this out step by step.
OK?
The first thing we want to do is make sure that we always show some appropriate component, the screen
based upon the u r l..
So if we are at local Lowe's 3000, we should show the accordion if we are at local shows.
Three thousand flash list.
Show the search component.
And so on.
I took all those different components and kind of represented them inside this table.
So we might call this a root mapping whenever we are at this year, El.
We want show that component.
So the first thing we need to understand is how to determine what your oil we are actually at.
To do so.
I'm gonna go back over to my browser.
I'm going to go up to the address bar and I'm going to manually edit your L to localhost Colin three
thousand slash translates.
Then once here, I'm going to open up my console and I'm going to type out window dot location.
Window dot location is an object that is built into your browser.
This object is going to be automatically navvy or updated anytime you navigate around to a different
you are well inside this object.
You're going to see a lot of information that has been extracted from the current year.
So we can see the current host post name, the entire your URL, the Origin Harth name and port.
In our case, we care about the property inside of here called Path Name.
And notice how path name is spelt with a lowercase N.
Towpath name is everything inside the URL after the domain and the port in this case.
I met Lokos three thousand slash translate.
So the path name is slash translate.
If we go to just local 3000 by itself.
And then print out that same object once again.
You'll notice that now the path name is just for ad flesh.
So whenever we are at the root, root or localize three thousand with no path whatsoever, we still
have a path name of forward slash.
So to really decide when to show each these different components, here's what we really want to do.
We want to show the accordion whenever window location Parth name is equal to forward slash.
We want to show search whenever window location, path name is equal to list and so on.
So these are the real checks that we want to do.
Somewhere inside of application to decide which component to show.
Let's go over to our Apte James file and we're going to implement some logic inside there to essentially
do these different comparisons and then show the appropriate components.
OK.
So back inside of my APT James file.
Here it is right here.
I'm going to define a series of different functions in each of these functions.
Where you going to do one of these different comparisons?
And then if this comparison is true, we will return the appropriate component.
So I will first put together a come a little function called show accordion.
Then inside of here, I'll say if window, location, path, name and remember, name is lowercase.
Equals, equals, equals forward slash.
Then let's return the accordion component.
Remember that whenever we show the accordion component, we have to provide an items crop.
We had defined items as a hardcoded array inside of our apt G.S. file at the very top.
So we'll just make sure that we provide those as an items prop.
Then we can call the show accordion function from inside of this div right here.
So inside of that div.
So this is our actual app component.
I'm going to call show accordion.
So let's then delete the translate component really quickly and test out just what we have so far.
I gonna flip back over.
Now, whenever I'm at localhost 3000 by itself, I see the accordion appear.
But if I go to local oast three thousand slash translate.
I see nothing at all.
OK.
So that's actually a good sign.
It means that we are only showing the accordion when a user goes to a path.
Name of forward slash.
Let's now build out similar functions for our other components as well.
The next one I will call show list.
Inside of here, we'll see if window location hath name is equal to flash list.
And if it is, we will return the search component.
Well, then, do you show dropdown?
And say, if window location Parth name is last drop down.
Let's return the dropdown.
And remember, the drop down component requires a couple of different props.
We're going to leave those off right now.
The result means that if we go to the drop down route, we are probably going to end up with an error
message.
But let's just kind of roll at this right now.
We just won't visit the drop down route right now.
Then the last one will be show translates.
And for this one, if window location.
Half name is slash translate.
Let's return the translate component.
And the transit component as well, just like search and accordion, should work just fine.
So the drop down at present is not going to work correctly.
But like I said, we will fix that up in just a moment.
Now, inside of the app component itself, I'm going to expand that, Dave, once again, and we can
call all those other functions.
We'll do show list.
That's the second one.
We'll do a show dropdown.
That's the third one.
And then show translate.
OK, so let's save this and flip back over and see how we're doing.
Now we've got just the accordion on the screen.
Fantastic.
If we go to slash list, we see our search component, which is great if we go to translate.
We get the translate.
And then finally, if we go to dropdown, we are going to get an error message right now.
But we will fix that up in just a little bit.
OK.
Let's say that we have now implemented some very simple, very basic routing.
But I think that you, Michaella, tell very quickly that there are some big downsides to this approach.
For example, inside of each of these, we have some extremely repetitive logic.
Every single one of them is really the same kind of check.
So whenever you've got some really repetitive code like this, well, it's probably a sign that we could
probably figure out a way to condense this down and rewrite it in a more compact fashion.
So let's see if we can't kind of get it fixed up a little bit, this code in the next video.