Original subtitles

Now with the basic routing working,

we got one clear issue.

At the moment we can only navigate

between those pages by changing the URL manually.

And whilst we, of course sometimes might do that.

And whilst we might share a link to a page,

it's all the pretty comments

that we want to have links on our page

which we can click, which will then take us somewhere else.

And therefore let's now have a look

at links and how we would add links to our page.

Let's say on our app JS file

we want to have a header above our main section.

And it's in this main section

where we wanna have the routes

and it's this header where we want to have the navigation.

And for this, of course

we could also create a separate component

in a separate components, folder components, and not pages

because this will be a component which is embedded

in JSX and not loaded as a route.

And in there we could have our main header component

or whatever you want to call it.

So as simple component, regular component function

as we created it multiple times

in this course already, and here, we then return our header.

And in there, we could have our navigation

with an unordered list with our different links.

That is a setup we could have here.

Now at the moment, we have two routes here, a welcome

and a products page and Henson does first list item.

We could add a link which leads to slash welcome

where we say welcome.

And then we duplicate this list item

and add a second link to slash products

which a load step products page

that is a basic navigation we could add here.

Now we can go to app JS and import our main header

from dot slash components slash main header.

And we just use it here

like this as a self-closing component.

Now we see this navigation here.

Now the styling is totally off.

We'll work on this in a second, but we can see

that we do have these two list items at the top here.

So our header is here.

And if I click them,

indeed we do navigate between those two pages.

But this approach has a big flaw.

And you can see this flaw.

If you take a closer look at the top left corner here

whenever I click these links,

you can see that does refresh icon turns to a cross.

And that means that we actually load a new page.

We send a new request.

We can see this even better.

If we opened the developer tools in India

we go to the network tab.

Whenever I click one of these items

you see that new requests are sent brand new requests

including a brand new request to a full HTML file.

This HTML file here is loaded.

Every time we click on one of these links.

So we do send a brand new request to the server.

Serving does app.

This works, we get the different pages, but it means

that we leave the active single-page application.

We start a new one.

When we click one of these links

we lose any application state that we might have

in this application.

And that is not ideal.

That goes against the idea

of building a single page application.

If we would be managing some cart,

some shopping cart for a user,

and we would lose all that state.

Whenever we navigate between pages

this would be a sup-optimal user experience.

So it would be better

if this browser default of sending a request

and requesting a new HTML page would be prevented

and we could write our own code for debt.

And we could add click listeners to these anchor tags

and prevent the browser default and manually

try to get react router to load the right component

but we don't need to do this manually.

Instead. There's a number of components which we can import

from react, router Dom, and that is the link component.

The link component does what the name implies.

It allows us to create a link.

Now we can replace the anchor tag with this link component

for both the opening and the closing tag

like this.

And we then have to replace the ref

attribute the ref prop here with the two prop

because this link component wants a two prop

which then holds the actual address we want to navigate to.

Now, if we do this and save this

visually we'll get the same output as before.

And if we inspect these links

we'll see that we still have anchor tags here

but these are now anchor tags rendered

by this link component and internally react router.

This package we're using will actually listen

to clicks on those links, prevent the browser default

and instead manually update the URL for us

so that it looks like if we switched the page

and it will then also change what we see on the screen.

So we have this fake navigation you could say

and that's what we want here.

Because now with that, if I click here

we still switched to page.

We still switched between products and welcome page.

But if you watch this top left corner and this refresh icon

you see that it never spins

simply because now we don't send new requests

and we can see this in the dev tools as well

in the network tab.

Now we don't see any requests being sent

because we don't send any

we stay on this load at single page application.

We don't lose any state.

And we still give the user the illusion

of switching between different pages

and there for we now also got this shareable URL

which will then lead us to the right page

when we enter it in the browser

and that is how we want to use routing.

We wanted to find our routes as we did it before

but if we are on the page and we want to allow

the user to navigate between these pages,

then we want to use this link component

instead of the standard anchor tag.