Let's get started on this ticket show component.
So we should be able to navigate to a year out of something like tickets flash and then the idea of
a ticket and see this thing appear.
You might recall that we discussed how we implement wild card routes just a moment ago.
So we had said that if we want to have a U or L of something like tickets slash wild card, we would
have to create a file inside of our pages.
Directory of tickets.
Slash and then inside of square brackets, ticket I.D..
Whatever word we put inside of those square brackets that will be provided to us as a parameter inside
of that context art object that gets passed, we get initial props function.
We'll take a look at that in just a little bit.
But right now, let's just create this file and make sure that we can navigate to a root of something
essentially like that.
So back inside my editor, I'm going to find the tickets directory inside the pages folder.
And in there, I'm going to make a new file of square brackets ticket.
Idee, thought J.S., and make sure you've got the closing square bracket on there as well.
Then inside this file, let's just create a very simple component.
Export it right away and then try to test this out inside the browser.
Don't make a component up ticket show.
I'll have it return a simple div that says ticket show.
And then I will export that.
OK, so let's now manually test this out inside of our browser.
Back at this tab, I'm going to find ticketing dot dev and I'll change it to manually inside that your
L tickets slash and then pretty much whatever you want to put in there.
So any kind of token whatsoever, any kind of random string of characters that should be matched against
the wild card route that we just put together.
If I go there, I'll then see it ticket show appear.
Well, OK.
Simple enough.
Not the worst thing the world now creating this route is pretty easy and straightforward.
All we have to do is create the file with the brackets around the name.
That's it.
But I do want you to understand that handling navigation to this route.
So specifically with a link element or that router thing that we just saw is just a little bit more
complicated when we start making use of these kind of query or wild card routes.
I'll show you examples that right away as quickly as possible.
Well, let's make sure no back over here.
Make sure that a user can get to this route without having to memorize this your y'all or having to
put in some distinct I.D..
So I think that to a handle navigation oversight route, we should go back over to our ticket list or
essentially the landing page component.
And we should add on a third column.
They'll display a link to go to that particular ticket.
Let's do that right now.
Back inside of our landing page.
I'm going to go down to our table inside of the header.
I'm going to add in a third column.
And I'll give it some text like Link.
And then back on our ticket list right here.
I'm going to add in a third TDE.
The right here is where we're going to want to display some kind of anchor element.
You might recall from way earlier inside this course how we handle link tags are essentially anchor
elements with next J.S..
We do not just place a single eight anchor element like so instead we have to use that link component
that is provided by next.
We can get a quick reminder on how that works.
If we go back to our components directory and take a look at the heterogeneous file inside of here,
we had imported link from next slash link.
And then to place an actual link that a user can click on.
We're going to show an instance of the link component.
That thing is going to be given in a trough property.
So that is where we want to actually navigate to.
And then we're also going to have it inside there.
An actual anchor element.
The anchor itself is not going to have an ATRA whenever next renders this thing that's going to automatically
take whatever HIFU provides the link and assign it to the underlying anchor element.
So we have to do the same thing here as well.
Back inside of our landing page component.
So inside this T.D. that we just added in.
At the very top, we'll import link from next slash link.
Well, then put the link in.
Inside there, I'll put my anchor element.
I'll give it some text like view.
Simple enough.
OK.
So now here's where it using these wildcard routes gets just a little bit nasty.
So if we are navigating to just a very single distinct route, such as sign in, sign out, sign up,
yeah, we would put in a single H.F. put in whatever right there and we would be happy.
Everything's good to go.
But because we are putting in a query route or a wildcard route here, it's just a little bit more complicated.
Here's what we have to do in the atrip property.
We're going to put in essentially the path to the file that we want to show inside of our pages directory.
So in this case, if we click on the link, we want to show the component at ticket's slash racket,
ticket I.D. or square brackets, ticket I.D. So we are going to write in here, slash tickets, slash
square bracket ticket I.D. We do not have to put on the file extension.
So there will not be any dodges.
It's just a ticket slash ticket idee.
We're then going to provide a second prop called As.
We're going to put in a template string to the thing and inside this template string, we're going to
actually build up the true real you or else that we want to navigate to.
So this would be our actual tickets slash.
And then the real I.D. of the ticket.
So for you and I, it would be tickets flash.
And we'll do some string templating here.
Ticket dot idee.
That's how we do link element whenever we are navigating to a kind of wild card route.
We first put in the ATF that really just describes the generic kind of general route without any customized
I.D. or anything like that.
Then we separately provide as.
And that is the real YORO that we are trying to navigate to.
OK, so let's say this and a good go do a quick test.
So looks like we've got the view.
If I hover over this at the very bottom left hand of the screen, you'll see a little pop up right there.
And it says that I'm trying to go to ticket slash and the idea that ticket does not yield to click this
and go directly to ticket show.
Well, so looks like that is working as expected.
I can, of course, also do a command click to open up a separate tab and it loads up ticket show as
well.
All right.
So, again, the trick here is whenever you're placing a link for a wild card route, we have to ride
a trip into.
As this idea right here is going to be true or we're going to do something very similar whenever we
are doing programatic navigation as well.
So, for example, back inside of our ticket form or the new ticket component we had just created.
We called Ratatat Bush right here.
We're gonna have to use something very similar to this H.F..
And as Propp, when we make use of Ratter push to go to a wild card route as well.
So just something keep in mind, we're going to see this topic come up in just a moment as well.
So it looks good.
We've got a starting point for ticket show.
Let's take a pause here and start to put together the implementation for that in just a moment.