So now we learned about links
which allow us to navigate from a to B.
Sometimes you need to navigate programmatically
because of forum, Bras submitted, for example
and I want to show this as well.
So let's say on the page for a specific client
we now also have a button.
And when this button is pressed
we want to load project a for this client.
Now we could absolutely use a link here.
If we just want to have a clickable thing
that navigates somewhere else
I'm just using this here, this button here to
show how you could navigate imperatively typically
of course you would not do that to replace a link
but to navigate In code when some action completed
when you parsed a forum that was submitted, for example
but here to learn how imperative navigation works
a button will do.
So we have this button
and when the button is clicked, we want to navigate away.
So therefore, first of all
we can define a number function here
in this component function.
So a nested function
which should be triggered when the button is clicked.
So the load project handler function, for example
sign this function to this button here
and we do this fruity on click prop.
Again, that is just standard react,
nothing next JS specific.
Now in this function here, we might be doing all kinds
of things, load data or anything like that.
And once we're done, we want to navigate away.
So when we do need to navigate in code, like we do here
then we can again use this router object
which we get from use router.
And this object has a couple of properties
a couple of values we already saw before
but it also has a couple of methods that help us.
For example, it has
to Porsche method to navigate to a different page.
So using router push is like using the link component
just programmatically, and they offer here.
We can then go to slash clients slash max slash project.
A for example, if we now save this maximum Liam page
and I click on load project a I'm taken to
slash client slash max slash project.
Okay? So that's how we can navigate programmatically.
If we use a router replace instead of push
then we replaced the current page with dead one
which means we can't go back after the navigation.
And we can also not just pass it in a string here
but again, just as before for the link, we can also pass
in an object here where we then set up path name two
slash clients slash square brackets ID slash square bracket
fly and project ID to encode these two dynamic segments
into this path, and then set our query object
to a nested object where we provide a concrete value
for ID in this case, max
and a concrete value for client project ID.
In this case, let's say project a
and the dead would simply be an alternative
to creating or using a string.
And if I do that and I go back and reload
if I click load project, Hey, that still works.
So that's how we can navigate programmatically
which is also sometimes required, especially as mentioned
for example, after submitting a form.