All language subtitles for 002 Routing In Our Project_en

OK, so what is routing?

Well, right now, we only have one homepage component that pretty much comprises our entire app.

But what if we had multiple page components, like an about page or a shot page or a Check-Out page

that needed to be rendered depending on what you URL the user was at?

Well, that is what Routings seeks to solve, and the routing library we're going to use is called React

Router Dom.

Now there are other routing libraries out there for react but react router Dom is the most popular and

most supported library for routing.

When it comes to building our application and react, it's easy to understand and it follows are component

driven architecture.

So let's actually try it out.

So how do we use it?

Well, first we have to install Riak Rotterdam and what I'm going to do is I am going to kill our server

and I'm going to yawn and react.

Router Dom.

Now, there is a chance that our libraries for battle just will conflict again, like it did when we

first installed Node SACE, and if it does, I'm going to show you how we can fix that issue.

So if Iranians start.

Yes, so we see that that's an issue.

OK, that's fine.

The reason for this is because there are dependencies between the Riak scripts that's in our Create

React app for Apple.

Just that is different from the one that is being required from some other version of a library that

we installed.

Right.

But this is OK because it looks like the major versions are not in conflict.

It's just this minor.

It's the seven versus the eight.

So what we can do with yarn is inside of our package, JSON, we can add a resolution.

And we can tell it that we want be able just to always be twenty four point seven point one no matter

what.

So now if we re install all of our dependencies, we'll see that we're forcing Bable just to be twenty

four point seven point one.

And now.

We should have no problem starting our application.

Awesome.

OK, so.

Let's actually see how to use react router dom.

Well, first, we have to go to our next guests and we have to import in browser router.

From React router dom.

And browser router is a component that we're actually going to wrap around our application.

And what this component does is it gives our application that's sitting between this component, all

of the functionality of routing that this library provides.

Now, in order for me to show you what react router does, I'm just going to write a bit of code first,

because it'll make more sense if you see it.

So I'm going to import this component route from Rotterdam and then I'm just going to make a quick component.

That renders out a div with an H1.

Of Hats page.

And this is just going to represent another page turn to our homepage right now called Arhats Page.

So how this root component works.

Is that it's a component that takes a couple of arguments, the main ones that I want to focus on are

exact.

Path and component.

Now, component will be the component that we want to render, right, we want the root to render.

So for now, let's just use homepage.

The path will be a string that's equal to the path itself from the current place in orat.

So because we're at the very base of our application.

Right.

The Yooralla is going to when we put the base, you are all is just logo's three thousand or like are

you out without any additional sub URLs following our URL?

So what this means is that when the Eurail is at the base, right, just slash, then I want to render

the home page when we're at localhost.

I just want to run to the homepage.

Exact is a true or false property.

So we are the past, true or false.

And if you just keep it as this with no equals, then it's equal to true.

It means that this path must be exactly slash in order for this component to render our home page component

or render if the root, for example, without exact let's say the URL was localhost three thousand.

That's right.

It is technically still true.

This part of the you are l right here.

Is still true.

So our homepage will actually still render.

So let me show you how that would happen.

So let's try another route where our path is hats and when it's hats, we want to render the hats page.

Well, now, if we go to our application.

If we navigate to hearts.

We'll see that we have our homepage and then underneath we have our hearts page, so without the exact

as long as the path matches, right, as long as it's present, then it will render the home page.

But if we make sure that it's exact.

Then now it won't render the home page unless it's exactly this path of just the slash.

These are pretty much the main things that we need out of our root component.

There's a couple others for more nuanced examples that we might explore later in the application.

But most of the time, it's very easy.

You can just go to the RACT, Dom.

QuickStart documentation, and you can see all of the API that you have access to, but this routing

is the main one that we're going to utilize.

The other component I want to show is the switch component.

Now, to use the switch component, we wrap our root components within it.

Now, what it does is the moment that a route inside of it finds a match in the path, it does not render

anything else but that route.

So before when we went to our hearts, you are all right.

If we remove the exact if we go to our hearts, you are all we know that we were matching the slash

and the slash has.

But switch will match first and then it will not render anything else after it.

So if we look and we go to hats, right, we'll see that we have our homepage, but there's no hats

page and the reason for this is because of switch.

So the moment switch sees something match the path, right.

As long as a route gets rendered, then it just renders that route.

It renders nothing else.

Now, if we put the exact back, then we will, of course, render our hats page because this homepage,

with the exact path of forward slash, never matched at this URL of slash hats.

And if we go back to our homepage while we're going to render our home page.

So the switch is useful because it gives us more control over our code.

Right.

It allows us to kind of follow a pattern where we know that as long as one route matches, then that's

the only thing we're going to render.

And that's useful if we don't want to accidentally render multiple components.

Right.

It just a lot more control that we get from the library.

But this switch and this root component there, the basic components that we're going to use to build

out this application.

And as we build, of course, we're going to pull in a little bit more and we're going to write some

more complex code with rack router dom.

But conceptually, this is what routing is in our project.