All language subtitles for 018 Using Programmatic (Imperative) Navigation_en

Now, we've got that layout in place,

before we work on the actual data fetching

and sending data to a backend,

let's work on that detail page.

We've got that Show Details button here

but it's not doing anything right now.

Now the goal of course, is to load this meetup ID page,

this dynamic page,

whenever we click on a single meetup item to be precise,

when we click on that show details button.

And therefore, we first of all need a link.

Now for this here on meetup item

on this meetup item component,

we wanna create a link here.

And of course, we could do this with the link component

and this would be the correct way of doing that

since this would render an anchor tag,

but to show you how you could navigate programmatically

something we will also need a later again

when we submit a form and navigate a way,

to show you this alternative.

I will stick to a button here

even though I will say that a link

would technically be a bit better,

but we'll stick to this button.

And instead, I want to create a function here,

a function which will then navigate us away.

The Show Details handler, that could be the function name,

and now we connect this button.

We wanna click prop,

queue this function,

and in the function we now want

to navigate programmatically.

And we can navigate programmatically

by using this, use router hook,

which we saw earlier already.

So we can import, use router, again,

use router, from,

next slash router,

and we can then call use router here in the component,

not in the show details handler,

it's a React hook and therefore the rules of hooks apply

and we should only use React hooks

directly at the root level of a component function.

And hence here we call, use router,

get access to that router object,

and extend this router object

which we can use in the show details handler

to navigate programmatically.

Because this router object

does not just have the query property

which gives us access to all that data

that might be part of the URL,

for a dynamic page for example,

but here we also have methods

for navigating programmatically.

For example, the push method.

This pushes a new page onto the stack of pages

and it's the equivalent of using the link component

if you don't want a link

but instead navigate programmatically.

Push, therefore, also takes a path

to which you want to navigate,

and here, that should be our meetup ID

because we have this meetup ID page here.

Now the meetup ID is something we get why via props

because when we rendered that meetup list,

we passed the ID prop into the meetup item

and therefore, instead of this meetup item,

we can now construct a dynamic path here by using props ID.

So this will lead us to slash,

and then the specific ID of this meetup item.

Again, here, programmatically,

we could also render a link and construct the link path

dynamically as an alternative.

But with that, if we now save this,

and we reload,

if I click show details,

we get an error because we have no content for this page,

but actually we see the URL was changed correctly

and the only missing thing indeed now

is the content on this meetup detail page.

And that's therefore, what we're going to add next.