All language subtitles for 018 Adding Links & Navigation_en

[Maximilian Schwarzmuller] Now let's take care

about adding such a navigation bar to our application.

And for this I'll go to the components folder

and add a new folder in there.

And I'll name it layout, because it will hold

some general layout components.

So a sub-folder inside of components,

and in there I'll add the main navigation.js file,

which is the file that should hold

this main navigation component.

Now I added it here in the components folder

and not in the pages folder

because this component will not be loaded

as a page with help of the router,

but instead we will embed it

in the content of our other code just as we did before.

Totally unrelated to the router.

Now in this main navigation component file,

we can again define our component function,

MainNavigation, and export it as we're used to.

And then of course return some JSX content here.

And here I wanna return a header,

a header component which in the end will then wrap

all the items that should go into this header.

And here I actually wanna have a div first with my logo,

which in this case will just be some text.

I'll name it React Meetups.

And then next to this div, inside of the header,

I'll add a nav element, and here I'll then add

an unordered list with a couple of list items

where all those list items will be the different links

which we have here.

Now, when it comes to those links,

we typically render links by using the anchor tag.

That's how we do that in standard HTML.

We could do this here as well but using that link component,

that link element, has one big disadvantage.

If we use a link like this, whenever we click it

a new request will be sent to the server.

The server here is the server hosting

this React application, and indeed that server

would then reply with our application,

and there the router would figure out which page to load.

So a link would work but, we send this request first,

which is redundant.

We already are in our running React application,

and it would be great if we don't leave it

just because we wanna navigate somewhere.

Hence sending that extra request

is not something we necessarily wanna do.

That's why instead of this anchor tag,

we instead use another component provided

by the react-router-dom package.

So we again import from react-router-dom,

and we import the Link component here.

The Link component can be wrapped around our link text

just like the anchor tag, and it will render

a anchor tag in the end but, internally,

react-router-dom attaches a click listener

to the anchor tag, and when you click on it,

it will prevent that browser default of sending a request,

and instead just parse the URL you want to go to,

change it in the browser URL bar,

but then not send the request,

but instead load the appropriate component onto the screen

just with React and JavaScript,

so that we stay on this already loaded page,

and we don't send this extra request.

So that's why we add links like this.

Now, of course, here that should not be some link

but a link to all the meetups let's say.

And to make Link aware of the URL it should navigate to,

we have to set the to prop here.

This is one of the expected props on the link component.

And here we set a path in this case just slash nothing,

because that is the path to the AllMeetupsPage.

Now we can replicate this, and add two more list items,

where the second one leads to /new-meetup

and says new meetup or Add New Meetup,

that's up to you, of course.

And on the last link we go to /favorites

and we say favorites, or My Favorites, something like this.

Now we got those links in place

and we got this main navigation component.

We can now use this in the App.js file,

and there we can now import main navigation

from ./components/layout/MainNavigation

and add this above that Switch statement.

Here we can add MainNavigation as a self-closing tag still,

if we want to.

If we save this, we'll see some navigation here.

And if you click those links, they work.

The styling is missing, but we got working links.

We got a working navigation.

Now I want to add some styling,

and for this, we're going to explore a different way

of styling our components.