‫So we learned about
‫how to programmatically navigate
‫using the useNavigate hook,
‫but there is also a declarative way of doing that.
‫And so let's now check out the Navigate component.
‫Now, since we have React hooks,
‫the Navigate component that we're going to learn about now
‫is not so much used anymore,
‫but there is still one very important use case for it,
‫which is inside nested routes.
‫So let me show you what I mean by that.
‫So let's come all the way back
‫to the beginning here,
‫and then let's go to our application.
‫And so, notice, how right now, we are not in app/cities.
‫And so that's why here,
‫then this button, is actually not selected.
‫While if we click here,
‫only then we move here to /cities
‫and it gets activated here as well.
‫So in order to fix this,
‫we can now basically use the Navigate component
‫to immediately navigate to this URL.
‫So let me show you how.
‫So, right now, we have both the index route
‫and the cities route pointing to the exact same element.
‫So both of them simply include the CityList.
‫But here, in the index route, let's now change that,
‫and let's instead use the Navigate component
‫that react-router-dom gives us.
‫And so then here, just like in the links,
‫we can specify the to prop.
‫And so then, as you can guess, let's write cities.
‫And so this is then basically like a redirect.
‫So you can think of this Navigate component here
‫also like a redirect.
‫So as soon as the index route is hit,
‫it will then basically redirect us to the cities route,
‫which is this one right here.
‫And so, if we go back again and click now,
‫then immediately we got redirected
‫to the place that we wanted.
‫So immediately now we have cities.
‫And here, of course, it is marked as active.
‫Now, the problem is when we want to go back here.
‫Because notice how as we click here,
‫nothing really happens.
‫And so to fix that,
‫here we need to add the replace keyword.
‫Because this will then replace
‫the current element in the history stack.
‫All right.
‫So let's try that again.
‫And here we are.
‫And if we want to move back,
‫then we are back to where we were before.
‫And that's actually it.
‫So I think this is the main use case right now
‫for this Navigate element,
‫but still, keep this in mind here
‫as you might need it in other situations.
‫So basically situations
‫where you cannot use the Navigate function
‫coming from the useNavigate hook.
‫So in this case here, that wouldn't really work.
‫And so then, we use this more declarative way.
‫So declarative because we just declare this in our JSX
‫that we want to basically navigate
‫or to redirect to this other URL here.
‫While with the Navigate function,
‫it is really an imperative way
‫where we really tell our JavaScript code
‫that we want to go to that other URL.
‫Now, okay, and so that does it for this video,
‫and actually, we even finished this section.
‫So we will keep working on this project in the next section,
‫but now we are ready to add something called context
‫to this project.
‫And so to do that,
‫we first need to learn about what that is
‫in a small intermediate project
‫before coming back to this one.
‫And so, let's now move on to the next section,
‫which is going to be all about that context API
‫that I just mentioned there.
‫So hopefully, I see you back there very soon.