Original subtitles

We created our home page.

But now what we want to do is add the ability to navigate across pages.

So what do I mean by that?

Well, right now we are on the home page and this is the current path we are at.

However, when I click on restaurants, as you can see, the path changes to slash restaurants.

But right here we are not presented with a brand new page.

Of course, now what I want to do is if we go to different paths, I want to show different pages,

different UI elements that accord with that path.

So why is it that no matter where we go, we're only showing this right over here, this landing page

inside of the app dot view file?

Well, this is intentional.

So if we utilize the app dot view, it's going to treat our Linux application as just one page application,

a single page application.

And no matter what path we go to, this is the HTML that we are going to render.

So what we need to do is we actually need to utilize a different format if we want to have different

pages, multiple pages with multiple HTML structures.

So what is that path?

Well, let's actually look at a diagram in order to understand this.

So in order to do this, well, we're going to need to do is first completely remove our app dot view

file.

We don't want to use that anymore because we want to have multiple pages.

Instead, what we're going to do is we're going to create a pages directory and it has to be called

pages and it also has to be all lowercase.

I know the p here is capital case, but it has to be all lowercase.

Now inside of this pages directory, we're going to have multiple view files view file similar to the

app dot view as well as any components that we have now over here.

Let's say we create a restaurant dot view file.

Now any view file inside of this page's directory is going to be treated very, very in a special manner.

I know that English wasn't probably great, but let me explain exactly what I mean here.

So we have this restaurants dot view file and what ends up happening is when we end up going to local

host Colon 3000 slash restaurants, which is the name of the file, it is going to take this template

right over here, the template inside of this view file and render that.

Now let's say we create a file called Hello Dot View inside of this pages directory.

Then if we go to local host slash hello, then it's going to render the template in this file.

Now you might be asking, well, what do we do in the case where we just want to render something on

local host 3000 with no path?

Well, in this case, what we're going to do is utilize index.

So we're going to call our file index.

And by default, what that's going to be is just a regular slash like so.

So in order to essentially duplicate the app dot view, but with this pages structure, what we can

do here is create a pages directory.

Then in here, we're going to create an index start view file.

I cannot believe that keeps happening.

Index dot view like so that we can just grab everything inside of this app view file and just paste

that in there.

And now all we need to do is delete the app dot view file.

So let's go ahead and remove that.

So now what I'm going to do is I am going to go ahead and now refresh and I'm going to go to localhost

3000.

And right away you can see that we have our app.

Now something interesting happens when I click on restaurants and you may have gotten a quick glimpse

of this.

So when I click on restaurants now we're getting a404 page.

And that's because now that we're using this page's structure, well, we need to have a restaurant

start view file in there to render some HTML before when we had that outdoor view, we're just going

to render that everywhere, regardless of what it was.

But now we need a restaurant dot view file in order to render the correct HTML template.

So this is exactly how we are going to start creating multiple pages throughout our application.

And this is so much easier than configuring it ourselves with view.

This is just kind of done automatically for us.

Okay.

So let's actually go ahead and create a restaurant start view file in here.

So I'm going to say restaurants dot view.

Mind the name.

The name is very, very important because we are going to be navigating to restaurants right over here.

So let's remember that we're navigating to restaurants.

So the name over here should be exactly the same as this.

Now, right over here, let's create a template, create a div, and then let's also grab this nav bar.

Let's put sat nav bar in there.

And then what I'm going to do is I'm just going to have an H1 saying, hello, this is the restaurants.

Restaurants.

Restaurants is always such a tricky word to spell.

Okay, so now let's go back over here and do a quick refresh.

Now when I click on restaurants, you can see now we get redirected to this page with this HTML template.