Original subtitles

Now React Router can help us

with nested routes, as we learned.

It also helps us with constructing path like this

and with navigating to more complex URLs.

Currently, we're always manually building strings like this,

and that works.

But this approach has one downside.

If we ever decide that we don't wanna show our quotes

under slash quotes, but maybe just slash quote,

then we have to change this here in the route definition,

and we have to change all our links

and that is something we will have to do.

But when we work with nested routes like here,

we also have to change it here in these route definitions.

So we have to change it in a lot of places

and I will revert to it here,

but we would have to change it in a lot of places.

And at least for those nested routes, that's unnecessary.

Here, we could simply use the fact that React Router

gives us certain Hooks that allow us to find out

for which URL this Component was rendered,

so that we don't need to repeat that URL

that path in the URL here.

And for that we can use another hook

provided by react-router-dom, useRouteMatch is to hook name.

It's kind of similar to use location

but it has more information

about the currently loaded route.

Not just about the URL but about some internally

managed data React Router is aware of.

We can simply call useRouteMatch here

and we get such a match object.

And let's simply have a look at this object first

by logging it to the console.

If we save that, if I open the dev tools,

we get this kind of object.

And what we see in here is that we get the path

but not the actual path in a URL,

but the path as it was defined by us for React Router,

including our placeholder, and this can sometimes be useful.

We also get the parents which were found for this route

and we get the full actual URL.

And that's no useful

because now we can use this match object

to construct these nested route paths dynamically.

Here, for this comments nested route,

ae can still create a string with a template literal,

but we can inject a dynamic value here

and use match dot path here.

So this path, including the placeholder.

We didn't do that before actually,

we use the concrete value and that also works,

but we can also defined as route with a placeholder

because after all this year is a route definition,

not a link, so having a placeholder here is okay.

We also have a place holder here in the main quote

detail route definition and that JS.

So here we can then utilize this path.

The same could be done here for this nested route

which shows this load comments button.

Here we can just use match path if we want to.

With this, if I save and reload, we see the common section

for slash comments and load comments otherwise.

So we got the same behavior as before,

but we don't manually have to create that string,

instead we extracted from the existing route definition.

Which means that if we now change our route routes

from slash quotes to slash quote,

we don't have to adjust our nested routes.

And that is a clear win, it's less work.

Now we can also use useRouteMatch

and to this match object for this link here,

because here I'm also constructing my full URL.

And since I know that this should be a link

to a nested route, I don't need to do that.

Instead, we can inject match dot URL here

and then just append slash comments there after.

With that, again, we have less work here and we use the fact

that we already are on a part of this page

we wanna link to.

So with that, if I, again, go to a single quote

if I click Load Comments, I do load to comment successfully.

But now we're using some convenience features

offered by React Router,

which ensured that we reuse existing knowledge

and we don't have to hard to code as much.

Speaking of hard coding, the quote list Component

also has some hard coding here.

We push slash quotes and change the query parameter.

This is all is a bit redundant

because we already are on slash quotes

and we will always stay on slash quotes,

it's just about the query presence here.

So here we could also use route match if we want to,

or use the existing location object,

since here, I'm only interested in the currently loaded path

and then not hard code slash quotes here

but instead use the current location path

which is the part after the domain, which is slash quotes.

So for this, we could change this code here a little bit

and actually switched to a template literal,

where I inject the result of this expression here

and where I start with another injected value,

where we have a look at location path.

And then we add a slash,

and that's the only hard coded text here.

And then we add a question mark, sort equals,

and then the value of this expression.

And here that's actually path name, not path.

Location has a path name, property which holds

the full current path, with all the concrete values

entered there.

So now with that, if we are on slash quotes,

if we click this button,

we again do change the query parameter,

but we reduced the amount of hard coded values.

We can also change the location we push or we link to.

Up to this point, we always worked with strings.

Whenever we created a link, like here in quote detail,

we in the end constructed a string.

The same in our main navigation, we have strings here

as destinations, and that is very common.

But if you have more complex destinations,

like here in quote list, where query parameters are involved

you might be constructing very long strings

and code could look like this.

It's readable, but it could be more readable.

And that's why React Router actually allows you

to use an alternative description off the destination

a link should lead to or this programmatic navigation

should lead to.

And I'll show it here at the example

of programmatic navigation, but you could use the same

kind of value for all your links.

Besides using a string here, as we did this far,

you can also pass an object

which describes the target's destination.

This object wants a path name, which is the path

you wanna navigate to, something like slash quotes.

Or in this case, simply location dot path name,

since we wanna stay on the current page.

And then here, you can also add a search key

and that allows you to add query parameters.

The search key simply wants a string

where we still construct our query parameters

as we do it here, so I'll copy that code

and add it in this template literal here.

But now, we split our path and our search,

our query parameter part into two different properties.

And this here is a bit more readable, I would argue.

It's totally optional, you don't have to switch

to this approach, but you may switch to it,

if you have more complex URLs you wanna navigate to.

And with that, if I saved this, if I reload slash quotes,

this button still works.

But now we made this a bit more readable

and that's a never convenience feature

offered by React Router.