All language subtitles for 20. Navigation With React Router

It's time to finally start making our application actually navigate to different pages so there will

then be able to start actually building each page and adding content to handle navigation in our application.

I use the popular react router library and since this is the most popular library for navigation in

react and I do already expect you to already have react experience.

I'm expecting that you have some familiarity with react router or at least understand the concept of

how it works so I'm not going to dive into all of the ins and outs but I am going to obviously completely

walk you through setting it up in this application I'll attach a link to the official react router documentation

to this lecture so that if at the end of the video you still are feeling shaky on react router you can

go ahead and read there for more information but I think that the general concepts are pretty simple

and you shouldn't have that hard of a time following along all right.

So here we are in the project directory in my code editor and I want to go over to our app dot J.S.

file this is where we will set up the routing for our application we'll start by right here importing

browser router route and switch all from react react router Dom make sure you get the last part DRM

on their then inside of our theme provider we're going to open up our browser router and we're going

to move our header inside of there and now we can actually get rid of our little Hello.

Finally.

So say goodbye to our hello and underneath the header is where we're going to switch over all of our

different routes these switch component only renders the first component which matches the given route

whereas if we just put all of our routes inside of the router there's a possibility that two different

routes could both match the U.R.L. and we could have two different pages rendered on the screen at once

this obviously is not ideal and so we use these switch component the browser router component simply

handles the functionality necessary for providing the browser with the correct you are Rel for each

page navigated to as well as manipulating the history object and enabling navigation via the Forward

and back buttons on the page those are the forward and backward buttons in the browser which would not

work without the browser router so inside of our switch we're going to place our first route component

and this is going to have a few different properties on it the first property is exact and so that's

going to default to true since we're not going to put any other options on it and that just ensures

that this rule will only be rendered if the exact you are specified is provided.

So anything else that could possibly match it we really don't want to render unless we know specifically

exactly that the user is trying to access this page then we need our path prop and we're going to set

this equal to the path in the browser that we want to be displayed for example our home screen is a

path of simply slash after the path we add the last property which is component and we are going to

set this equal to the brackets and inside of here you place the component that you want to be rendered.

When this route is accessed eventually we're going to go in and have a different component for each

page that we will pass in to be rendered here.

But for now I just want to put in a dummy component that's just going to put something on the screen

so that we can tell whether or not we're actually navigating we'll do that by creating an arrow function

which simply is going to return a div with home inside of it.

So then if we go and we close up our route and we hit save we see the screen refresh and now we have

home displayed on the screen instead of the previous.

Hello.

Let's go in and copy this route component and we're going to add one for all of the different routes

in our application.

That means we're going to need eight more.

So one two three four five six seven eight.

And now we need to go in and specify the path for each one as well as change the text inside the component

that's rendered so that we can fully test our navigation.

So let's set a path for this one of services here of custom software below that mobile apps below here.

Web sites then revolution then slash about slash contact and at the very bottom slash estimate will

now go through and change the text to reflect each of those pages as well.

So here we'll put the services and then custom software then mobile apps down here and then web science

the Rev though Lucian about us contact us and estimate let's save this and our page will refresh.

And now if we come over to the browser and try to go to a different tab Oh well you see that it changes

the styling for the active tab up here.

But we're still seeing just the home text displayed on the screen.

Well that's because we haven't actually set up our tabs to change the route.

So let's go ahead and now move over into our header dot J.S. file and start by at the top here.

Let's import and then we will D structure this a link from react if I can get that right.

React router Dom then if you remember from the documentation we're going to pass that link and all of

its properties to each of these tabs using the component prop. So if we continue down to each of our

tabs and after the class name we go ahead and we add component equals brackets link this now turns our

material UI tab into a react router link components while still maintaining all of the correct styling

and functionality.

Let's go ahead and copy that component equals link and we're going to add that on to each of the tabs

but be sure to make sure you are putting in the right place for each one and then hit save.

We still actually have one last thing to do before it's totally working and that is to actually now

tell those link components where they need to go so for each component or tab rather we'll start after

the component equals link property and we will add a another property called two and set that equal

to a string and that string is the path to the route that we specified in app dot.

J Yes.

So if you look back here and you look at all of the paths that we specified so we need to reference

these paths here on our tab links to tell them which page to navigate to this to prop is actually a

prop of the link component.

But as I explained before all properties they are not used by the tab component are passed down to the

link component things to this component composition from material UI.

So we can just put our two property here and it will be passed down as if we put it directly on the

link like normal and we will specify this first one as a link to our just slash page.

We can go ahead and copy that and now we'll put a two onto every other tab except we need to change

the path to now slash services and here to revolution and here to about abound and here to slash contact

if we go ahead and save this.

Now once the page refreshes we can go over and if we try and select a new tab Oh something's wrong here

it looks like I misspelled the services.

So let's go to.

Right here you'll probably notice that services will save and the page refreshed still on the wrong

your url.

So let's go back to the home page we see home.

Let's go to services.

We see services the revolution about and contact and so now not only is the active tab being managed

and highlighted but we are actually rendering different content for each page as well as changing the

U.R.L. for each tab that we are on so that is basically all of the functionality for navigation that

we need in our application now fully wired up and working.

So if we just refresh the page oh do you see that look at the home.

It says we are on slash revolution.

The content is displayed the revolution but the active tab says that we are on the home page.

So it looks like whenever we are refreshing the page it's going to default back to that home page no

matter which one we're actually on.

So to take a look at what is going on here and how we can fix it let's go to the next video.