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.