All language subtitles for 017 Adding Routing_en

So now that we picked up those

important React basics, it's time to dig a bit deeper

to dive into some advanced concepts like routing

sending HTTP requests and application wide state management

and what all these things are.

We're going to explore that.

And for this, we're going to leave this basic project

this basic demo we worked on.

Instead, we're going to build this

meet up demo application

I showed you earlier already.

And for that, I cleaned up my project.

I removed basically all the imports and all the content

from this app file here and index css has some new content.

You'll find my updated project attached.

So there you all to find the updated index css file.

And I deleted all the components.

Now, as I just said

you'll find this updated starting state attached

and you can therefore then start with that same project.

In the end here,

once you downloaded it, you need to run NPM install again.

Then one step done.

You can NPM start this project again to bring

up that development server again.

And that will give you a blank page.

Because now we're going to build this project

from the ground up.

And this project will now involve more components

than the previous one.

And it will involve the important concept of routing.

Now, what does routing mean, considered is Netflix example

from before again.

There I went to the

my list page to view the items I added to my list.

Now it looks like I visited a totally different page

but if you watch this refresh icon in the top left corner

you see that it never changes.

It never goes into that loading mode

because actually we never fetched a new HTML page.

The page loaded by the browser never changed.

We always stay on that single page.

And that's the case for Netflix

because they also have such a single page application.

It should also be the case for our project now.

I wanna give the user the illusion

of having different pages to which we can navigate

whilst actually staying on one

and the same page and leaving it up to react, to change

what's visible on the page.

The advantage of this approach is

that we never have to wait for a new page to be loaded.

Instead, we can always stay fast, stay reactive

because everything is handled by client side Java script

which is faster than sending a new request to a server.

And that can really enhance the user experience.

Now, therefore we wanna add something which is

called routing to our project.

We wanna add a router, a special tool

which actually watches changes

in the URL and then changes what's visible

on the screen based on the URL.

So, which basically gives us a way

of giving our users this illusion of routing.

And for this

I'll actually quit this development server again

and install a new dependency,

a new third party package into this project.

We do this with NPM install with the NPM install command

but now not just executed like this

but instead we now add a package name thereafter.

The name of the package, which should be installed

so download it into this project here.

And that's the react dash router dash dom package.

That's a package which as the name kind of implies

allows us to add routing functionality to react.

So it allows us to handle URLs and change.

What's visible on the screen

without fetching new HTML pages.

Simply hit Enter and this package will be installed.

And in package dot json

you'll see that a new entry was added.

So that file was automatically updated

which means that if you now share this project again

without a node modules folder

and someone then runs just NPM install again

that newly added package will also be picked

up and installed because it is part of this package.

json file.

Now we don't need to do this here

because we just did install it.

So we can run NPM start again to bring up

that development server again.

And now we can add routing, but what does this mean?

What does add routing mean?

In the end it means that we need

to add this routing tool to our code

so that we have this thing watching for URL changes.

And we need to let this thing

this tool know which component should be loaded

as a page for which route, for which URL.

And for this all start by adding a new folder next

to the components folder inside the src folder

and that's the pages folder.

You don't have to add to this folder

and you don't have to name it pages, but in the end here

this is a good way of differentiating

and of separating our components that are embedded

in other components, which will be stored

in the components folder,

from the components that will be loaded as pages.

Technically we'll build components in the same way

no matter how we use them,

but for as a developer, to have an easier time to

quickly find the right components we wanna work on,

I'll separate them into these two folders.

And in the pages folder, we're now going to add a couple

of react components, which again

will be built just like all the other components

but which will be loaded by this router,

we just installed when certain URLs are visited.

And here for this application for this project

we're building here, I'll add all meet-ups js file.

So a component that will be responsible

for loading and displaying all the meetups we have.

I'll add a new meetup js file and I'll add a favorites

js file.

New meetup will allow us to add a new meetup later

and favorites js will allow us to view our favorite meetups

because we'll add a functionality that allows us to

bookmark, to favorite a meet-up as a user.

But step-by-step for the moment, I'll just set up

some dummy components in these three files.

And I'll start with all meet-ups and I'll name

this component function, all meetups page.

You can name it however you want.

I'll just choose this name to make it clear

that this component will be used as a page

that's loaded by this router.

Now, just as all the other components we built

before this component has to be exported

and it needs to returns some JSX code.

And for the moment, I'll just return a div where

I say all meetups page, that's of course not

the final content, but some starting content for now.

Then we can copy this and add it into favorites file here.

So this is the favorites page

and we wanna export the favorites page.

And here I'll then say favorites page, and then save this

and copy this into new meetup and named his new meetup page

and also use that name for exporting.

And here we say, new meetup page.

Now we've got these free page components.

Now we need to use that router package to

define when which page should be loaded.

And for this be first of all, need to go to index js

and to wrap our app component, which you render here

with another component.

For this, we need to import something

from react dash router dash dom and that

something which we import is the browser router, like this.

Now it turns out

that browser router is in the end a component itself

and therefore we can use it as a HTML element, opening

and closing tags, and wrap those tags

around the app component.

Now that is something we haven't seen

up to this point that a non-standard component.

So a non HTML component would be wrapped around something

but it is something we can do.

And it is something we are doing here.

We're going to learn how we make our own components

wrappable a little bit later in this course.

So now we initialize this router package.

We make it aware of this app

and we ensure that it watches our URL so to say.

Now, as a next step

we need to define the URLs we wanna support

and which pages should be loaded for the different URLs.

And we do this in the app component now.

So in this wrapped component.

In there we return a div and we can leave it like this.

But now in this div

I wanna return or use other components

which are also imported from react router dom.

So we also import react router dom here and here

we import the route component.

So just like browser router route is a component

and we use it like a component, but the job

of the route component is to define different paths

in the URL we wanna listen to

and which component should be loaded

for these different paths.

And therefore I will also already import

my three page components here

that all meetups page from dot slash pages, all meetups.

And then the new meetup page from dot pages, new meetup.

And of course also the favorites page component

from dot slash pages, favorites.

And now in this div here, we can use the route component

which I'm importing from react router dom

and give it a path prop, a path attribute.

Now path takes a string

and that will be the path in the URL after your domain.

So in our case

our domain is for example, local hosts:3000.

That's our domain, of course

on a real server after deployment.

That would be something like my page.com.

And now the part

after the domain is the path that can be just a slash

so no path at all in the end

or it can be something like slash favorites

or slash products or anything like that.

So the part after the domain is the path and here we define

for which path, which component should be loaded.

And here we can start

with slash nothing to handle the default path

that we just visited our domain slash nothing.

And then between these route tags,

we actually do now add the component that should be loaded,

like the all meetups page like this,

because that should be the starting page actually.

We can add another route here for, let's say

slash new dash meetup and the path it's up to you.

If we now visit my domain.com/new-meetup

then the component which we render

between these route tags will be loaded.

And that could be the new meetups page.

And last but not least

we can also define a route for the path slash favorites

and then render the favorites page like this.

Now we're defining three routes

and instead of this content here

the actual page component will be rendered

if that route determines

that the current URL matches this path.

So if we are on my domain.com/new-meetup

this new meetup page component would be rendered

and not the favorites page, for example.

So if we save this and we go back and reload

localhost:3000, we should see the all meetups page here.

But if we go to favorites, for example

we see favorites page as well, but wait a second,

is this the desired result that we see it as well?

Well, it depends in some applications, depending

on what you build, you might want such a nested page

so that the page for just slash slash nothing is rendered

but also this specific page for slash favorites.

We see this output because by default

react router matches all your paths and it simply checks

if the current path includes these paths here

and slash favorites includes both slash favorites, as well

as just slash, which is why both components are rendered.

Again, that could be what you want, but often it's not.

That's why there is another component provided

by react router dom, which helps us.

And that's the switch component.

We can use the switch component to wrap all our

route components like this.

And with that, we tell a react router

that only one of these routes should be active.

So at most one of these pages should be rendered.

If we do that and save this,

we don't see two components being rendered

but we don't see the correct component

being rendered either.

Instead for a slash favorites,

we now see all meetups.

And the reason for this is now how your routes

are matched.

React router by default checks if the path

of the current URL starts with the path to find here

and because of switch

it will then stop looking at the other routes as soon

as it has a hit, as soon as it finds a match.

Now, of course, slash favorites starts with just slash

and then because of switch, it doesn't look any further,

and therefore all meetups is rendered.

That's not what we want.

And we can prevent this by adding the exact prop here

on route and setting this to true.

Though you can also shorten this

and if you have a prop

which you just want to set to a true the value

you can just add the prop name like this.

So we add the exact prop

and set it to true to this first route.

And the exact prop tells react, router that for this route

it should not check if the path begins with this path

but if the full path matches this path and that's now

of course not the case for slash favorites.

So this will not create a match and it will continue looking

and it will ultimately find this route four slash favorites.

So now we see the favorites page or a new dash meetup,

we see the new meetup page and for just local hosts:3000

we see the all meetups page

and that's how we can add routing.

But of course at the moment

we're just navigating around by entering URLs manually.

And that's not very realistic.

In reality, we would probably want some, some header,

some navigation bar at the top

which provides different links

and therefore that is what we're going to add next.