1
00:00:01,080 --> 00:00:03,240
Let's get started on this ticket show component.

2
00:00:03,690 --> 00:00:07,860
So we should be able to navigate to a year out of something like tickets flash and then the idea of

3
00:00:07,860 --> 00:00:09,520
a ticket and see this thing appear.

4
00:00:10,200 --> 00:00:13,620
You might recall that we discussed how we implement wild card routes just a moment ago.

5
00:00:13,950 --> 00:00:18,690
So we had said that if we want to have a U or L of something like tickets slash wild card, we would

6
00:00:18,690 --> 00:00:20,430
have to create a file inside of our pages.

7
00:00:20,430 --> 00:00:21,520
Directory of tickets.

8
00:00:21,720 --> 00:00:24,660
Slash and then inside of square brackets, ticket I.D..

9
00:00:25,640 --> 00:00:30,710
Whatever word we put inside of those square brackets that will be provided to us as a parameter inside

10
00:00:30,710 --> 00:00:34,370
of that context art object that gets passed, we get initial props function.

11
00:00:34,670 --> 00:00:35,940
We'll take a look at that in just a little bit.

12
00:00:35,990 --> 00:00:40,820
But right now, let's just create this file and make sure that we can navigate to a root of something

13
00:00:40,910 --> 00:00:42,320
essentially like that.

14
00:00:43,720 --> 00:00:47,790
So back inside my editor, I'm going to find the tickets directory inside the pages folder.

15
00:00:49,930 --> 00:00:53,800
And in there, I'm going to make a new file of square brackets ticket.

16
00:00:55,210 --> 00:00:59,340
Idee, thought J.S., and make sure you've got the closing square bracket on there as well.

17
00:01:01,700 --> 00:01:05,060
Then inside this file, let's just create a very simple component.

18
00:01:05,330 --> 00:01:07,910
Export it right away and then try to test this out inside the browser.

19
00:01:08,760 --> 00:01:10,280
Don't make a component up ticket show.

20
00:01:14,450 --> 00:01:17,120
I'll have it return a simple div that says ticket show.

21
00:01:19,680 --> 00:01:21,030
And then I will export that.

22
00:01:24,520 --> 00:01:27,080
OK, so let's now manually test this out inside of our browser.

23
00:01:27,860 --> 00:01:33,600
Back at this tab, I'm going to find ticketing dot dev and I'll change it to manually inside that your

24
00:01:33,600 --> 00:01:37,430
L tickets slash and then pretty much whatever you want to put in there.

25
00:01:37,520 --> 00:01:42,590
So any kind of token whatsoever, any kind of random string of characters that should be matched against

26
00:01:42,590 --> 00:01:44,180
the wild card route that we just put together.

27
00:01:45,020 --> 00:01:47,080
If I go there, I'll then see it ticket show appear.

28
00:01:47,870 --> 00:01:48,450
Well, OK.

29
00:01:48,560 --> 00:01:49,130
Simple enough.

30
00:01:49,220 --> 00:01:53,570
Not the worst thing the world now creating this route is pretty easy and straightforward.

31
00:01:53,600 --> 00:01:56,810
All we have to do is create the file with the brackets around the name.

32
00:01:56,870 --> 00:01:57,410
That's it.

33
00:01:58,010 --> 00:02:01,760
But I do want you to understand that handling navigation to this route.

34
00:02:01,880 --> 00:02:07,250
So specifically with a link element or that router thing that we just saw is just a little bit more

35
00:02:07,250 --> 00:02:11,480
complicated when we start making use of these kind of query or wild card routes.

36
00:02:11,960 --> 00:02:14,720
I'll show you examples that right away as quickly as possible.

37
00:02:17,570 --> 00:02:20,070
Well, let's make sure no back over here.

38
00:02:20,610 --> 00:02:24,540
Make sure that a user can get to this route without having to memorize this your y'all or having to

39
00:02:24,540 --> 00:02:25,800
put in some distinct I.D..

40
00:02:26,470 --> 00:02:30,750
So I think that to a handle navigation oversight route, we should go back over to our ticket list or

41
00:02:30,750 --> 00:02:32,520
essentially the landing page component.

42
00:02:32,890 --> 00:02:34,470
And we should add on a third column.

43
00:02:34,740 --> 00:02:37,110
They'll display a link to go to that particular ticket.

44
00:02:38,050 --> 00:02:38,890
Let's do that right now.

45
00:02:40,940 --> 00:02:42,770
Back inside of our landing page.

46
00:02:43,760 --> 00:02:46,640
I'm going to go down to our table inside of the header.

47
00:02:46,670 --> 00:02:48,080
I'm going to add in a third column.

48
00:02:50,540 --> 00:02:52,130
And I'll give it some text like Link.

49
00:02:54,500 --> 00:02:56,510
And then back on our ticket list right here.

50
00:02:56,630 --> 00:02:58,130
I'm going to add in a third TDE.

51
00:03:00,250 --> 00:03:03,290
The right here is where we're going to want to display some kind of anchor element.

52
00:03:03,890 --> 00:03:08,900
You might recall from way earlier inside this course how we handle link tags are essentially anchor

53
00:03:08,900 --> 00:03:10,440
elements with next J.S..

54
00:03:10,970 --> 00:03:16,400
We do not just place a single eight anchor element like so instead we have to use that link component

55
00:03:16,670 --> 00:03:17,850
that is provided by next.

56
00:03:18,470 --> 00:03:20,240
We can get a quick reminder on how that works.

57
00:03:20,270 --> 00:03:25,150
If we go back to our components directory and take a look at the heterogeneous file inside of here,

58
00:03:25,160 --> 00:03:27,860
we had imported link from next slash link.

59
00:03:29,920 --> 00:03:32,330
And then to place an actual link that a user can click on.

60
00:03:32,690 --> 00:03:34,670
We're going to show an instance of the link component.

61
00:03:35,270 --> 00:03:37,280
That thing is going to be given in a trough property.

62
00:03:37,400 --> 00:03:39,200
So that is where we want to actually navigate to.

63
00:03:39,980 --> 00:03:41,720
And then we're also going to have it inside there.

64
00:03:41,780 --> 00:03:43,340
An actual anchor element.

65
00:03:43,820 --> 00:03:49,460
The anchor itself is not going to have an ATRA whenever next renders this thing that's going to automatically

66
00:03:49,460 --> 00:03:53,510
take whatever HIFU provides the link and assign it to the underlying anchor element.

67
00:03:54,350 --> 00:03:56,060
So we have to do the same thing here as well.

68
00:03:56,090 --> 00:03:58,370
Back inside of our landing page component.

69
00:03:59,750 --> 00:04:01,480
So inside this T.D. that we just added in.

70
00:04:02,570 --> 00:04:07,130
At the very top, we'll import link from next slash link.

71
00:04:08,650 --> 00:04:09,830
Well, then put the link in.

72
00:04:11,860 --> 00:04:13,480
Inside there, I'll put my anchor element.

73
00:04:14,650 --> 00:04:15,980
I'll give it some text like view.

74
00:04:16,100 --> 00:04:16,610
Simple enough.

75
00:04:18,550 --> 00:04:18,730
OK.

76
00:04:18,820 --> 00:04:22,930
So now here's where it using these wildcard routes gets just a little bit nasty.

77
00:04:23,440 --> 00:04:28,510
So if we are navigating to just a very single distinct route, such as sign in, sign out, sign up,

78
00:04:29,020 --> 00:04:33,340
yeah, we would put in a single H.F. put in whatever right there and we would be happy.

79
00:04:33,340 --> 00:04:34,210
Everything's good to go.

80
00:04:35,050 --> 00:04:40,240
But because we are putting in a query route or a wildcard route here, it's just a little bit more complicated.

81
00:04:40,600 --> 00:04:43,210
Here's what we have to do in the atrip property.

82
00:04:43,450 --> 00:04:48,670
We're going to put in essentially the path to the file that we want to show inside of our pages directory.

83
00:04:49,270 --> 00:04:54,910
So in this case, if we click on the link, we want to show the component at ticket's slash racket,

84
00:04:54,940 --> 00:05:00,640
ticket I.D. or square brackets, ticket I.D. So we are going to write in here, slash tickets, slash

85
00:05:01,000 --> 00:05:05,020
square bracket ticket I.D. We do not have to put on the file extension.

86
00:05:05,050 --> 00:05:06,490
So there will not be any dodges.

87
00:05:07,090 --> 00:05:08,920
It's just a ticket slash ticket idee.

88
00:05:11,050 --> 00:05:14,890
We're then going to provide a second prop called As.

89
00:05:16,590 --> 00:05:20,580
We're going to put in a template string to the thing and inside this template string, we're going to

90
00:05:20,610 --> 00:05:24,540
actually build up the true real you or else that we want to navigate to.

91
00:05:25,110 --> 00:05:27,330
So this would be our actual tickets slash.

92
00:05:27,390 --> 00:05:29,310
And then the real I.D. of the ticket.

93
00:05:30,110 --> 00:05:32,610
So for you and I, it would be tickets flash.

94
00:05:33,450 --> 00:05:35,180
And we'll do some string templating here.

95
00:05:37,670 --> 00:05:39,050
Ticket dot idee.

96
00:05:41,130 --> 00:05:45,300
That's how we do link element whenever we are navigating to a kind of wild card route.

97
00:05:45,330 --> 00:05:51,420
We first put in the ATF that really just describes the generic kind of general route without any customized

98
00:05:51,420 --> 00:05:52,620
I.D. or anything like that.

99
00:05:52,980 --> 00:05:54,690
Then we separately provide as.

100
00:05:54,810 --> 00:05:57,420
And that is the real YORO that we are trying to navigate to.

101
00:05:58,460 --> 00:06:01,140
OK, so let's say this and a good go do a quick test.

102
00:06:02,670 --> 00:06:03,890
So looks like we've got the view.

103
00:06:04,310 --> 00:06:09,000
If I hover over this at the very bottom left hand of the screen, you'll see a little pop up right there.

104
00:06:09,050 --> 00:06:14,180
And it says that I'm trying to go to ticket slash and the idea that ticket does not yield to click this

105
00:06:14,600 --> 00:06:16,120
and go directly to ticket show.

106
00:06:17,020 --> 00:06:18,950
Well, so looks like that is working as expected.

107
00:06:19,520 --> 00:06:24,320
I can, of course, also do a command click to open up a separate tab and it loads up ticket show as

108
00:06:24,320 --> 00:06:24,560
well.

109
00:06:26,230 --> 00:06:26,420
All right.

110
00:06:26,470 --> 00:06:31,030
So, again, the trick here is whenever you're placing a link for a wild card route, we have to ride

111
00:06:31,060 --> 00:06:31,740
a trip into.

112
00:06:31,930 --> 00:06:37,510
As this idea right here is going to be true or we're going to do something very similar whenever we

113
00:06:37,510 --> 00:06:39,640
are doing programatic navigation as well.

114
00:06:40,090 --> 00:06:44,260
So, for example, back inside of our ticket form or the new ticket component we had just created.

115
00:06:45,230 --> 00:06:46,730
We called Ratatat Bush right here.

116
00:06:46,970 --> 00:06:50,480
We're gonna have to use something very similar to this H.F..

117
00:06:50,600 --> 00:06:55,540
And as Propp, when we make use of Ratter push to go to a wild card route as well.

118
00:06:55,660 --> 00:06:59,040
So just something keep in mind, we're going to see this topic come up in just a moment as well.

119
00:07:00,360 --> 00:07:01,040
So it looks good.

120
00:07:01,190 --> 00:07:02,830
We've got a starting point for ticket show.

121
00:07:03,110 --> 00:07:06,750
Let's take a pause here and start to put together the implementation for that in just a moment.