All language subtitles for 2. Router

Hello.

In the last lecture, we have started working on the concept of multiple pages.

We have created Page for home, for about fake you, for a log in and for the register.

What is the current problem is that they can display only one page at a time.

Let's start, and let's enter the internals here about the package that will help us with the routing.

So depending on the current URL they'll be having in the URL bar, they'll display the correct page.

OK for these, open your top anyway to search here for a view that are out there.

It's a view that they're out there about the routing.

You can find everything in there on this website.

Rowdier Dot View Oracle.

OK, let's press enter and let's get started.

So let's get started, and then we have again, two veterans for refugees, two and a four of you,

just three.

Let me see if you have here documentation for a future history here.

I guess you need to go up here and to click here before you OK, and here let's get started.

So first, we need to install a bureau there for so let's go, please come and go to your.

Terminals and coolers, screen and exchange area, all their let's import let's instead of the earlier

form.

And you can see everything exploding here, guys essentials go one by one.

You can see the exact topics here.

There are also details about the view around all of these advanced topics.

I believe building through the documentation of the dreaded Soviet probe, I will provide you a solution.

OK, so I don't need to even have a other open able close it and we will continue in our code now.

Please verify that the view out there has been installed for you, of course.

OK, we'll continue our call to let's close all these files.

They'll go into our SIRC folder and they will create here a new folder.

I will call her out there in the crowd there, I will create a new fellow called Index Dodgers, and

here I will initialize my implementation of the routing.

First, you need to import a couple of packages you need to import, create a web history, create a

VB story, also create.

You have also sorted out some differences between these two histories.

You can also write about.

That's basically how the routing works in the background.

But if you want to have a more classical way of routing, you will go over the web.

History can see create an idea of five history most common history for a single page applications,

and we are going for this way of the routing.

OK, so create Web history.

They're really important function called create, rather create, uh, or older, I don't know why it's

so important for me automatically now, but it should be recreated rather.

Okay, I'll make it full screen for you and then I will create here.

All right.

They're out.

All right.

And it will be array of objects that are each optical specify.

They're out.

So it's possible here out object.

And let's see fire for crowd path.

So that's there.

But I was explaining here that the and there.

ADHD.

Aid will access and the aid and the empty Hesh, which is this is the important part because you can

be sure you are all of your of your page.

So this is the actual part of this site or at the current euro you are and what page you want to display.

So basically, when we have an empty, empty slot, in the end, we want to display home page home,

right?

Then we have a sledge about we want, uh, bout we want to display our about page, about page when

the judges that are, you know, what to do?

Right?

So that's the path.

Will the deciding factor what page you would like to render out?

So in this case, Bob, it's an empty slash and to the name of drought, you can call it whatever you

want the name.

I will spend your life, but I want to create actual navigation.

OK, so home and the components will be rendered out.

So that's a very important part interior component and that will be your home page.

So place import, it wants to go to import the pages and let's get here home.

And actually, we take a look back on it and put it out of this folder two pages folder and to harm

of view, right?

Pages and the homeland of you to specify an extension, by the way, but I don't know why it doesn't

auto import for me, import actually import the home page from slash.

Pages.

All right.

So I really would just like this OK and home page, I'll provide to my component.

OK, it's complaining now you can hear that.

You can see it all of the squiggly lines, the red ones that you are using basically its functions yet.

So we need to use them, OK to use them.

I create here a variable broader.

OK.

And I will use the function to create the rather to create another function.

You need to provide object object, specifying the type of the history of the routing, which is your

created history or result of this function.

So you will specify here history and call here to create.

We'll call this function here could create history.

We'll call it.

And then it will specify here out and is there our soldiers specifying here currently we have only one

on the road.

And then he will export these rowdier also export a diesel folder out there, because this will be important

for our main dodges, the very well defined ecology studies of either plug in here we are basically

creating plugging.

OK, and you don't need to really know right now what exactly this plug in is because there is a code

that integrates with your villagers and it will expose yourself functionality.

In this case, it expose you to one component that they'll be deciding, depending on the part of it,

that you would like to display.

OK, so we can go to main lodges and we can import are rounder, so up here, let's import around there

from dot slash browser.

That's what we are importing and putting it out there from our file here.

These are either here then as we have here, up component will right here, up adult use.

That's how you are just setting the plug in, OK and will register just out of there.

OK.

In this case, what is the difference between a component and plug in components specify only a single

component as the right thing.

Here are custom components, but the plug in provides more broader functionality, also exposing more

functionality we can use in our view JS application I will show you later what we can use in our application

thanks to this Belder plugin.

OK, but we have other ideas.

Abdul.

Rather, we are just getting it, and now we can really use it, we can use the rotary component.

So now go to your index jazz.

We'll register here multiple rallies just to four for a start.

One more I've got your import about page from pages and about network properties, object based here.

I believe that there probably will be about and they will be about and the company won't render out.

These are about about page itself.

OK, with all of this, you can go now to episode view and that's very important part here.

Instead of hard coding here, a home page that you want to display, you want to access here, something

called a broader view.

Thanks.

Thanks for the plug in.

We have registered in our main dodges that are out there.

We have access to that order of your component and our view component is this intelligence part, the

deciding depending on the rout, in your view at all of a debate you want to display.

So if you have here.

Empty.

You are going to home.

If you have here.

If you have here is less about.

You are going to about page and so on.

If you have a hero slash log in, you're going to log in page.

OK?

Of course, depending how many rabbits you have.

Depends how many rabbits you have defined in your traveler file.

OK.

So depending on the rabbit here, you have access that either of you has access to all these components

and depending on their path in your URL, it will render them out.

This is where you are going into your component and you can enable home page from here.

OK, OK, guys, let's save it, let's go back to browser, let's refresh and let's go to empty slides

here.

Eight thousand eighty and you can see you are displaying your home page at a second around here.

Is about sports.

It's about it's about should render out I'm about page now I can register this pages for all of my other

AP for all of my other roles.

So now please copy this and they need how many more pages beneath three more pages.

So one two three, another 30 stardom.

So after the about, I will write a fake you page and the name is a fake Q and the company will be f

fake Q page.

Of course, I need to import all of this, then I will go to slash logging.

This will be a log in page log in page here.

Now the Slash Register Register and the register page now will go up here.

I'll copy this three more times and I will write here f a Q page from slash f a Q, then a logging a

page from a log in and register page from the register.

I'll save it, and now I should have access to all of my roads.

Now refresh, here I will go, slash the register at the register page and I will go to log in and log

in page.

AFAIK, you m.f.a. your page elago to empty slash.

I am on my home page.

Oh yeah, that's going to be enough for today's lecture.

Any questions I ask and in the next lecture will continue will be improving it.

Because, of course, on every page you would like to display the navigation bar, which apparently

doesn't happen.

So I hope to see you guys in the next 12 years.