Okay let's talk about router in React.
So what is router router decide on the page that we currently are react is a single page application
framework that means we are always in the index page and we just replace the page based on the current
context.
So basically what we can do is we can decide, let's say we will have a few links and then we will click
that link will go to another page.
But in our case, it's not going to be another page, it might be another component.
So to handle this we can use our router and there is no router built in React, so we will need to add
it as a external library.
So what I can do for now is I can close this footer and will stay with the App.js for now.
So we have this display.
Nothing has been changed and then I will stop my server.
So we'll do control C the server has been stopped.
You can see some messages here and what we will need to do is we need to add a router dom so npm install
or you can do I in shortcut npm install and then we will do react router.
Dom.
Like that.
So NPM space install space react router dash dom.
And in here what we can do is we can add this dash dash save and I talked about it before and I will
make some more space here and if you open this.
Package.json as we have here.
Dependencies here.
This is what we already have installed.
So npm install will add react router dom to this dependencies and this save is telling us.
Okay, we would like to add it to the dependencies here.
So what we can also do is we could go.
Like that.
So add it to our package Json, but inside dev dependencies at the moment we don't have any any dev
dependencies here, so it will just create a new section and it will be added here.
In our case we would like to add it inside our dependencies here, but since NPM version five, we don't
need to do that safe flag anymore because by default it is added for us.
So what I can do is just having NPM install and then name of the package I would like to install and
then clicking enter and you can see this will be downloaded from the internet and then it will be installed
within the node modules and also automatically it will be added in the dependencies.
And you can see here that's been added.
So we have this one version five added to our package Json.
And I didn't have to do anything that's been done by for me automatically so I can close it.
Actually, you don't even need to open this.
I just had it open for you to see how it works, but normally you have it closed all the time and you
don't need to worry about this at all.
Okay, so once we have a new packet, what we can do is from that new package, we can import two things.
So import.
Crowd.
And browser router.
From the package.
We just.
Install.
So we have those here and then we can actually use it.
So what is happening?
Actually, I'm not going to do that here.
I will show you where we can actually implement it.
It's really up to us where we would like to do it.
But I will go to the top level element, which is our.
Index.js here and Index.js here.
Basically, it's rendering this application inside our route so I can actually start from here and then
I can decide at this point what should be passed to this route based on the URL we have in our browser.
So we have this route and browser router and we can instead use App.js.
We can actually pass the router inside so we can create a variable that will be constant.
Routing and then in the parentheses I can do something here.
So basically this routing here, I can replace it with an app like that.
And then what we need to do is we need to wrap everything in the browser router like that.
And inside we can use our roots.
We also will have more than one.
So I will wrap everything in the div and then I will create a root for each component.
Let's say we'd like to use it so we have our root here and then we can do a part like that.
And then let's decide on the part if there will be nothin in my URL like this.
So at the moment it's localhost 3000 and there is no nothing there.
So it is like a single slash.
Then I can decide what component I would like to use.
And then I can say the application component that how it was before.
So before we pass this to render the app component here and that was render based on this.
But this time we are saying if the path is like this so there is not an in the URL, then use the component
app and if I will save it now actually I need to run it.
So npm start.
So let's come back to our previous.
And you can see here everything is as we had it before.
So basically this time we are saying just render whatever.
It's actually from the routing and the routing decided on based on the path, which component to render.
So we have just one.
And in this case we have up.
So let's say we would like to have header and footer that will be like a separate separate pages.
I will just copy this.
It will be easier for me to use it in the index and I will just implement import them here and then
I can duplicate this twice.
So let's say if I will have.
Heather.
And then I can have footer.
So if I will have Heather, then I would like to use Heather component.
If I will have a footer, I will use footer component.
Of course this is header and footer, so it shouldn't be used as a whole page.
But as an example, I would like to show you how it works.
So basically what we have here, so once we have that different roles here, what we can do is if we
go to our URL and we see the app component, because at the moment the path is like this.
But we can add, for example, let's add footer at the very end and you can see here a strange thing
happening.
You have this footer because we had that loop inside our footer and we have it twice.
So this is the app and this is the footer.
So why this is happening, the reason for this is React is going from top to the bottom and it will
try to match all the paths.
So basically, it's first it's trying to match this one.
Do we have this one?
So it's like URL and slash It is and then it doesn't really mind if you have something a after this,
but this match, this part.
So it will render this component.
And then let's go for a header, not in the header and then it will go footer.
There is footer, so it will display.
So at the moment we have pulled up and the footer.
So how can we deal with that?
If you would like to have it exactly like it is here, you need to pass exact here.
So this way you are telling okay, if the path will be exact like this.
So nothing else in the URL then render the application.
Otherwise go to the next one.
So we are checking header.
No header and footer.
There is footer.
So we display this.
So if we come back here to normal URL, you can see the app is displayed.
So this is how the router works and obviously you're not going to do it with header and footer.
This is supposed to be a real pages or some kind of navigation and then you can have a normal navigation
as you would have in a traditional HTML page and then you can have a link.
So if you link it to this, this URL then react automatically loads that component for you.
So you can work with links and you can work with different URLs to display different content for your
website.