Section 10 (React Intermediate): Lesson 2 - React router

Описание: Hey you and welcome.

In this video we will add navigation to our already existing app that we had built in the previous video,

the Contacts app.

So let's dive right into it.

I will start by using the React Dom router or React router Dom That's the library name.

So if I go to Firefox, that's the library that I want to work with the documentation for which is available

on React router.com.

That's the documentation I have open.

We will refer to it in just a second.

But first thing first, I will install it in my app.

So if I go back to my CLI and npm install react router dom and that should install the React router

dom for me.

Now how do we use that in our app?

Let's look at the documentation.

I will hop over to create browser router.

That's the router we will be using.

There's tons of others, but the one you need for your browser is the create browser router.

All right, so if I go here, it tells me that you have to import browser router from create router

dom and you have to provide it something like this, which is a object array of objects and the object

will have different values.

We will copy paste this code and also need to provide router provider from a router dom.

So let's do all of that.

All right, so first things first, let's copy paste the import into VS code.

I'll do all of this in index dot TSX.

That's our route.

So let's do it above right here.

And then let's copy over line number 11 to 24.

So that's the router configuration.

Now we will be missing a few components, but we will we will create those out and of course we'll will

change the configuration to match our convention that we need to work with.

So let's do it above here.

All right.

So it is missing root.

And again, we did create a root component, so maybe I can do an auto import here.

Yes, I can.

And then root loader, we don't need to worry about that.

We will not be doing loading from React router.

We will create our own later on.

And then for the nested component, I will comment this one out.

For now.

We don't have a nested component.

That means we only have one root, so it is still a single page app, but we're just importing the navigation

into our app.

So if I save, nothing really changes because I haven't really done anything with this router configuration.

So let's go back to the documentation copy paste router provider into where the app is.

So that should render things accordingly.

Perfect.

Yes, it does.

It does.

Great.

Next thing would be is I want to introduce some child component into it.

And let's start with just a basic child component that just says, welcome to my contact app.

Get started by clicking here, something like that.

And that's usually called hero component.

So if I go to chakra templates, I believe there is a section for hero components right there and I

can pick one.

I'll pick the first one right here.

There's tons of others, I believe.

Yes, there are.

I will just work with the first one here, so copy the code and I think I'll copy all of it.

And to my hero dot TSX file.

So I'll create a new file called Hero Dot TSX and I'll copy paste all of this.

So let's copy this.

All right.

Let's head over to File Explorer in the components new file called Hero Dot TSX.

Paste that in.

Highlight the file Explorer.

Now let's make a few changes because I noticed that it was working with a different framework called

Next.

So next head, we don't need head here.

So all of this code about head can go away.

We don't even need the fragment.

Seems like anymore.

Let me just see what the end of the code looks like.

If it's a fragment.

Yes, it is.

And the container?

Perfect.

So we can delete even the fragment here.

What else?

We don't need $15 a month.

We don't charge for the service.

So let's take that away.

And what else?