Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:04,150
So now we learned about links
2
00:00:04,150 --> 00:00:07,080
which allow us to navigate from a to B.
3
00:00:07,080 --> 00:00:10,600
Sometimes you need to navigate programmatically
4
00:00:10,600 --> 00:00:13,840
because of forum, Bras submitted, for example
5
00:00:13,840 --> 00:00:15,840
and I want to show this as well.
6
00:00:15,840 --> 00:00:20,100
So let's say on the page for a specific client
7
00:00:20,100 --> 00:00:21,693
we now also have a button.
8
00:00:21,693 --> 00:00:23,940
And when this button is pressed
9
00:00:23,940 --> 00:00:28,840
we want to load project a for this client.
10
00:00:28,840 --> 00:00:31,930
Now we could absolutely use a link here.
11
00:00:31,930 --> 00:00:34,760
If we just want to have a clickable thing
12
00:00:34,760 --> 00:00:36,840
that navigates somewhere else
13
00:00:36,840 --> 00:00:39,330
I'm just using this here, this button here to
14
00:00:39,330 --> 00:00:42,810
show how you could navigate imperatively typically
15
00:00:42,810 --> 00:00:46,090
of course you would not do that to replace a link
16
00:00:46,090 --> 00:00:50,300
but to navigate In code when some action completed
17
00:00:50,300 --> 00:00:54,600
when you parsed a forum that was submitted, for example
18
00:00:54,600 --> 00:00:57,670
but here to learn how imperative navigation works
19
00:00:57,670 --> 00:00:59,580
a button will do.
20
00:00:59,580 --> 00:01:00,680
So we have this button
21
00:01:02,165 --> 00:01:03,730
and when the button is clicked, we want to navigate away.
22
00:01:03,730 --> 00:01:05,069
So therefore, first of all
23
00:01:05,069 --> 00:01:07,390
we can define a number function here
24
00:01:07,390 --> 00:01:08,980
in this component function.
25
00:01:08,980 --> 00:01:11,020
So a nested function
26
00:01:11,020 --> 00:01:13,930
which should be triggered when the button is clicked.
27
00:01:13,930 --> 00:01:18,930
So the load project handler function, for example
28
00:01:20,248 --> 00:01:22,760
sign this function to this button here
29
00:01:22,760 --> 00:01:25,250
and we do this fruity on click prop.
30
00:01:25,250 --> 00:01:26,129
Again, that is just standard react,
31
00:01:26,129 --> 00:01:30,832
nothing next JS specific.
32
00:01:30,832 --> 00:01:33,900
Now in this function here, we might be doing all kinds
33
00:01:34,823 --> 00:01:36,450
of things, load data or anything like that.
34
00:01:36,450 --> 00:01:39,630
And once we're done, we want to navigate away.
35
00:01:39,630 --> 00:01:43,220
So when we do need to navigate in code, like we do here
36
00:01:43,220 --> 00:01:46,020
then we can again use this router object
37
00:01:46,020 --> 00:01:48,250
which we get from use router.
38
00:01:48,250 --> 00:01:51,130
And this object has a couple of properties
39
00:01:51,130 --> 00:01:53,752
a couple of values we already saw before
40
00:01:53,752 --> 00:01:57,540
but it also has a couple of methods that help us.
41
00:01:57,540 --> 00:01:58,850
For example, it has
42
00:01:58,850 --> 00:02:01,248
to Porsche method to navigate to a different page.
43
00:02:01,248 --> 00:02:06,248
So using router push is like using the link component
44
00:02:06,430 --> 00:02:09,310
just programmatically, and they offer here.
45
00:02:09,310 --> 00:02:14,310
We can then go to slash clients slash max slash project.
46
00:02:16,427 --> 00:02:21,427
A for example, if we now save this maximum Liam page
47
00:02:22,590 --> 00:02:25,330
and I click on load project a I'm taken to
48
00:02:25,330 --> 00:02:28,103
slash client slash max slash project.
49
00:02:30,371 --> 00:02:32,243
Okay? So that's how we can navigate programmatically.
50
00:02:33,260 --> 00:02:35,990
If we use a router replace instead of push
51
00:02:35,990 --> 00:02:39,110
then we replaced the current page with dead one
52
00:02:39,110 --> 00:02:42,163
which means we can't go back after the navigation.
53
00:02:43,120 --> 00:02:46,710
And we can also not just pass it in a string here
54
00:02:46,710 --> 00:02:50,200
but again, just as before for the link, we can also pass
55
00:02:50,200 --> 00:02:54,530
in an object here where we then set up path name two
56
00:02:54,530 --> 00:02:59,530
slash clients slash square brackets ID slash square bracket
57
00:03:02,890 --> 00:03:07,890
fly and project ID to encode these two dynamic segments
58
00:03:08,650 --> 00:03:12,610
into this path, and then set our query object
59
00:03:12,610 --> 00:03:15,920
to a nested object where we provide a concrete value
60
00:03:15,920 --> 00:03:18,420
for ID in this case, max
61
00:03:18,420 --> 00:03:21,810
and a concrete value for client project ID.
62
00:03:21,810 --> 00:03:23,980
In this case, let's say project a
63
00:03:25,620 --> 00:03:27,640
and the dead would simply be an alternative
64
00:03:27,640 --> 00:03:30,520
to creating or using a string.
65
00:03:30,520 --> 00:03:34,600
And if I do that and I go back and reload
66
00:03:34,600 --> 00:03:38,070
if I click load project, Hey, that still works.
67
00:03:38,070 --> 00:03:41,240
So that's how we can navigate programmatically
68
00:03:41,240 --> 00:03:45,690
which is also sometimes required, especially as mentioned
69
00:03:45,690 --> 00:03:48,143
for example, after submitting a form.
5579
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.