All language subtitles for 014 Navigating Programmatically_Downloadly.ir_en

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.