Okay.
Our application has a fully functional code so we can get the records from database.
We can update them, we can create new and we can remove them as well.
So what we will do now is we need to introduce some authentication.
So because what we have in our code if you go back to API services we have that token.
At the moment we have that hardcoded token.
This is not really acceptable.
So we want to secure our API.
That means we need to enable login.
So in this video what we will do is we will take what we have and we protect whatever we have with the
login.
So we will need to start working on the way our application is rendered.
So I will go to app.js.
And this is our main component here.
And actually this component app is loaded in here inside index.js.
So you can see here index.js.
This is what we have.
So we have a route and then route will render this app.
So this is our component and our component will be here.
So in this video what we will do is we will introduce our router.
So basically based on the route in the browser we will load one component or another.
And to do that we will need to install React Router Dom.
And that's a package.
We can go here.
That's a package here.
So we can go with react Router comm.
And here.
And the newest version at the moment is six.
So we will do that here.
We can actually click tutorial and it will have a little tutorial here.
We're not going to do all of what it is here but we'll need to install React Router Dom.
This is what we need to do.
So basically I can copy that and we can go to our code.
And then I will close my server and I will just paste it here.
So React Router Dom needs to be installed.
And then we'll run the server again.
So what else will need to do.
There's a few ways we can actually use that router.
I will show you one way but feel free to to come to this website and see different examples and what
we can do.
We'll actually use a few handy features from that router from here.
So basically what we need to do is we need to do something like this.
So we need to import a create router and a browser router.
And this.
So I will also copy that.
And we can import that here.
So what we are doing is we have that create browser router and also router provider.
So two things that we import from that library here.
And that's in the tutorial we need to do two things.
We need to create a browser router.
And also in the provider we need to provide it.
So we can actually do that here in our code.
Actually I can copy that to be faster.
So if I will go here then we will have our create browser router.
And that router provider will go instead of our app.
So we will have router provider here.
We need to provide a router.
And this is the router we are getting here.
So I will have it like this.
And I can close this.
So basically we had app.
So we render app inside.
Instead of that what we will do is we have that router provider.
This is something that we import here from that library.
And we provide the router which is basically the one that we've created here.
We could name it whatever you like.
So you can say our writer our router router and put it here.
It doesn't really matter.
So this is an object that we can create.
So we can tell what part will what elements that will render.
So let's say when we have a path like this so we don't have anything in the URL.
We want to have a login page.
So I will create a new component.
Right click new file and I will do alt s x.
So here I will do.
Import React from react and then we can have export.
Default.
Function.
Export.
Out.
And what we will do is we will return.
Let's say we will return H1 and let's say out component here.
So we have that new component here out.
And what we can do is we can go to our index.js.
And in the same way as we imported app, we can also import out.
And if I will click enter it will import that from component out.
So this is my new component that I have just created.
So if we have that part and I will show you how it works in a second, what I want to do is I want to
render that element.
So I basically need to tell this is the out component.
I have it, I want to have it there and we can actually put it in one line.
So if maybe that will make a little bit more sense as it will be kind of compact.
So we have that part and that element will render.
But we can also do is we can duplicate this.
And if I will have a part movies then I want to have the old application render there.
So if I will save it now and we have some errors here and so we have this not found error can't resolve
components out.
So if I will grab this out.
Oh I know what I've done.
Sorry.
Probably you spotted that before.
I name it TSX which is a TypeScript.
And I will need to rename this.
And it's supposed to be JSX, which is JavaScript.
So that would work.
So if I we save it and you can see here it's working fine.
So sorry for that.
And so we can go to our application here.
And you see our component here.
So when we don't have anything here in the URL then authentication would be a out component will be
rendered.
If I will have slash movies like this.
This is my application.
So this is what we actually have done here.
So if I will go back to here I created that create browser router and I can decide what part will render
what element.
So if we don't have anything there the out will be.
If we have movies the app will be.
So whatever.
We had that before and then we render that as a in a route.
So that's how it works.
We have that movies and then our application if I will go to localhost 3000 nothing is actually in the
URL.
The authentication is here.
And that's how we set up our router.
And we can switch in between different components that we would like to render.