All language subtitles for 011 Navigating with the _Link_ Component_Downloadly.ir_en

So now we built a bunch of dummy components,

a bunch of dummy page components here.

Of course our application.

If you want to call it like that,

isn't doing anything useful though.

And it's not doing anything useful on purpose

because I just wanna to show these core features first

before we then later combined what we know to

build something more realistic, to build a real application.

Now, up to this point, we have all those different pages

and components, but we can only navigate between them

by manually changing the URL.

And that's of course not very realistic.

In reality, we typically wanna navigate through links

or programmatically when some action completed

and therefore that what we're going to have a look at

right now and for this let's go to our main index JS file.

So directly in the pages folder,

this homepage component here,

there, let's say we now also wanna

add a bunch of links so we can add a unordered list

component with a couple of lists items.

And then in every list item, we want to have a link to some

of those pages we created here.

For example, we could add links

to the portfolio index and to our clients index.

Now, how do we do that?

Normally we add links with an anchor tag.

We can do this here as well.

We could add a link like this and it would work,

but this has a disadvantage.

Now let's add it like this though.

Let's add a link as an anchor tag

Hence if we go back to just our domain slash nothing

we see that link.

If I click it, I'm taken to the portfolio page.

It works, but it has a disadvantage.

The disadvantage here is that with such a standard link,

we in the end send a brand new HTTP request to

load this new page, which means that any application state

we might have when our running React app would be lost.

If we have some App-wide state, which is stored

with React context or Redux,

it would be lost since we send a brand new request

and we get a brand new HTML page.

And that's not really the idea of building a React app

no matter if you're using Next.js or not, you wanna stay

in that app and you want to manage App-wide state.

That shouldn't change just because you use Next.js,

because if that would not work this way anymore

it would actually be a disadvantage and not an improvement.

So therefore we typically don't want to use links like this.

Instead when using React Router in a non Next application,

we import a link component from React Router.

And with Next.js, it's the same

for this we again import something from Next

but now not from Next router, but from Next link.

And we import link.

Important here not between curly braces,

because link is the default export

of this link package from the Next library.

So we import link

and the link is a component which we can use

and we can use it as a replacement for the anchor tag.

So we can simply replace a with link.

Now link has a href prop, which we can set, so we don't even

need to change this.

And the href prop also takes a string with the path

to which we wanna navigate.

Now, if we save that therefore,

and we go back to our starting page.

If I now click on portfolio,

I still go to the portfolio page.

But now without sending a HTTP request behind the scenes

without losing any app-state we might have

and the link component actually also has a couple

of other tricks up its sleeve.

It has a couple of other improvements.

For example, it automatically pre fetches any data

off the page we might navigate to as soon

as we hover over the link and so on.

So these are some advanced optimizations which

will become important later.

Now on this link component

we can also set a couple of other props of, for example

we can set a replace prop to not push this new page

but replace the current page with it.

So that we can't go back that can sometimes be useful.

And we can also set a couple of other options,

which we'll dive in later.

For the moment href is the most important option.

And therefore of course, now we can add another list item

with another link where we wanna go to our clients.

So here we could then set href to slash clients

to be taken to that client's page.

If you go back and reload this

and go to clients here we are.

Now on that client's page,

we might want to go to our individual clients.

So we want to plug in a value for that dynamic ID

and therefore an index JS in the client's folder here.

I also want to add a couple of links

and I want to now navigate to dynamic routes.

And that's what we're going to take a look at

in the next lecture.