Maximilian: 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.