Original subtitles

OK, now, before we continue, I think it's really important to cover a couple fundamental concepts

in react router dom and to do so I've built this very quick little application to demonstrate all it

is, is it has three pages.

It has a home page.

It has a topics page.

And it has a topic I'd page, right, a topic detailed.

So three pages now, if we were to look at the code for this.

We would see that it's just three functional components that render Divs with the one telling us where

we're at and then it's all nested in roots inside of our app component.

Right.

Our home root is the base path with the component homepage, our topics, route slash topics and then

our topics detail is topics slash colon topic ID.

Now I know that this Colen topic ID is kind of new, but we're going to cover that a little later.

The first thing that I want us to look at is our home page.

The reason why is because one of the things that reactor dome does for us is that any component that

gets rendered by our route.

Gets past three arguments, the component that gets rendered is going to be the component we pass into

our component property on our route.

But what do those three properties look like?

Well, let's lock them out and see.

Let's navigate through our homepage.

And let's open up our dev tools, we'll see that the three props that we got past were a history prop,

a location and a match.

Now, the one I want to look at first is the match.

So there's four things we get inside of our match.

The first is the URL.

The euro is just the you are all of our component.

That it got rendered up, too, from the root.

Now, what do I mean by this?

So if we were to look at our route for homepage, right, we learned that in our last lesson without

this exact keyword, any of our.

Paths that start with a slash and then anything after is also going to render our home page, because

technically, if we were to navigate two topics now.

We are still matching the forward portion of our you are Al, right, which means that this route pattern

is matching for our homepage.

But if we were to look at our match, we actually see that the URL only matches up till the slash,

not the topics, so that you orl, no matter what we type, even if we were to navigate all the way

here and the you are all property on our match will always only display the you are up until where it

actually matched.

The path property is just the pattern that the route is looking to match.

So the path property for our home page would be just the slash the path property for our topics list

would just be slash topics.

And then for topic detail will be topics and topic ID, which is what we see here.

If we were to log this in each of these components, we will see.

That that is exactly what will show, so if we were to navigate to topics.

We'll see in our topics that the path is just the topics, which is the pattern that it's matching in

the.

The is exact property is the one that's matching that is only true.

If the entire URL matches the pattern, so while it's true for is first topics, because we're large

topics, it is false for our homepage that despite it being rendered.

It's not a perfect match because there's more of the Earl than what is being matched by the route.

Finally, the program's property is an object of you all parameters.

Now, what's a URL parameter?

This is a U all parameter or a root parameter.

When we write this in our path, we're saying that this route is waiting to match anything up to topics

and then slash anything in this spot after.

It can be a dynamically changing value, right, but that topic ID value we want to be able to access

as a parameter.

Now, why is this important if we were to navigate?

So let's make our home page exact, right.

If we were to navigate, to slash topics, slash 13, we actually now have access to that in our program.

But let's log at first.

We'll see that in our match.

We now have access to this topic, ID 13.

This is really useful because let's say in our topics detail, we wanted to show which topic we're looking

at while we would be able to access it by going topics not matched up Hiram's topic ID.

And if we wanted to use this idea to fetch a set of data related to this specific topic, right.

It's good that in our topic detail page, we have access to that specific ID.

So these parameters and doing it with this style allows our topic detail to populate itself if we needed

it to, from some kind of backend database based off of what specific detail it's at.

And our topic detail now is aware of it.

And usually we store this based on the Yooralla parameter.

Right.

Like if we were to if you look at many Web applications, you'll see that if you are looking at one

of your friends, for example, on Facebook, it'll say Facebook dot com profiles, and then they're

either email or some unique identifier.

So that is why this program pattern is so valuable.

Now, the next thing is the history.

Now, the history one is quite complicated, but the main thing I want to focus on is the push.

So there's two ways to navigate.

In React router, Tom, between our pages right now, we've just been dynamically updating the URL and

getting to different pages, but in reality, the first one is the use of this link component.

And the link component is a special component that recruiter Rotterdam gives us that lets us dynamically

pass in this property of two and then the string of where we want this link to take us to.

And now if I go to home.

I have this what looks like a modified ayling that will take me to this, like the only difference between

this and are actual.

Topics is that react, you've got to remember, is a single page application, which means that it's

not actually read directing you and rebuilding the entire application every time the URL changes.

We're really just hijacking the your L's position to determine with JavaScript what part of the DOM

to take off and then what part of the DOM to replace write.

What component do we want to remount or mount?

We're not trying to re render the entire application, which was typically the case before we were building

react applications because REACT is an SPEEA, a single page application.

So because of this and a link would actually force you to redirect and re render the entire application,

whereas using the react route or dom link, we're just borrowing the URL to, to tell our application

what to re render.

Now, the other way to do this type of navigation is using the history PRA.

So if instead of a link, we wanted to use a button and in the end click of our button, we would pass

it a function.

That gets called when ever gets clicked, and in this function, we will call the history Propp, right.

And we will tell it to push and then the string where we want to go.

So this is equivalent to using a link, but it gives us more dynamic access.

Right.

We can dynamically functionally control when we want this to work.

So if, for example, we wanted to do this in a component did mount instead.

Right.

We couldn't render a link in our component did mount because it's just a functional call.

Right.

It's a method we would use history, dot push and we'll see that here.

Right, we have this topics button, we can just click it and go.

So that's the main use that we get out of the history.

The third prop that we have is the location.

The location prop actually tells us.

Where we are currently like, what is our application, the main thing I want us to focus on is the

path name, ignore these other properties.

Let's just look at the pathing.

If we were to navigate, let's say let's not make our home page exact again.

If we were to navigate to like all these random.

Savi, URL's.

Even though our homepage still matches our location, gives us the full path name of where we are currently.

So this is useful because our application, our components in some way can become aware of what the

full URL looks like.

Why would we use these properties while the history one with the pusch we understand?

Location, we can see why we might need the path name at some point, but the main usage of match beyond

being inside of a specific topic detail.

Another useful thing about it.

Is that this allows our components to build out a nested root structure.

So what do I mean by nested routes?

Well, let's say, for example, our topic detail page renders a bunch of links, right or sorry, our

topic list page renders a bunch of links to a bunch of topic details.

Well, we could have the link.

And this link will go to.

A dynamically generated route, let's say, we want to say.

Prop stop, match dot, you are right.

So we want to use the current URL.

And then we want to say that we want to go to any topic detail, right.

We want to go to let's say I want to go to 13, for example.

And this one is too topic 13.

And let's do this for a couple others.

Seventeen, twenty one, these are all just random.

Well, now it doesn't matter where our topics list is, it will always now be aware and know how.

To take us to that, you are all right.

Even if our topics list was at some obscure Long You URL.

That it was not aware of.

Assuming that this was the case, right?

Now we can change it in our route.

But now our topics list doesn't care, let me just hide our homepage as well.

Now our topics list doesn't care about anything regarding where are you are l is from the point of where

it matched.

All it cares about is that I'm trying to render out or take you to different topics right from my path

onwards.

So this is how we can build out dynamic routing without our topics list, being aware of the entire

you are all right.

And we can now reuse this topic list in multiple places as long as our topic, our topic detail, as

long as we have the appropriate routes for it so we can even replicate this.

With just a blog topics.

But we can still use the same component for.

Because now, right, we have this topic list that works.

But we also have this topic list that works.

And they can take you to different topics, essentially, we've still just we've compartmentalized and

able to reuse our topic list and topic detail with dynamic routing.

That's why this match property is useful.

So we will see this a little bit more.

So these are still very abstract concepts, but it's very valuable for us right now to know what they

are.

So armed with this knowledge, let's keep building our application.