1 00:00:02,000 --> 00:00:04,000 So now we learned about links 2 00:00:04,000 --> 00:00:07,000 which allow us to navigate from a to B. 3 00:00:07,000 --> 00:00:10,000 Sometimes you need to navigate programmatically 4 00:00:10,000 --> 00:00:13,000 because of forum, Bras submitted, for example 5 00:00:13,000 --> 00:00:15,000 and I want to show this as well. 6 00:00:15,000 --> 00:00:20,000 So let's say on the page for a specific client 7 00:00:20,000 --> 00:00:21,000 we now also have a button. 8 00:00:21,000 --> 00:00:23,000 And when this button is pressed 9 00:00:23,000 --> 00:00:28,000 we want to load project a for this client. 10 00:00:28,000 --> 00:00:31,000 Now we could absolutely use a link here. 11 00:00:31,000 --> 00:00:34,000 If we just want to have a clickable thing 12 00:00:34,000 --> 00:00:36,000 that navigates somewhere else 13 00:00:36,000 --> 00:00:39,000 I'm just using this here, this button here to 14 00:00:39,000 --> 00:00:42,000 show how you could navigate imperatively typically 15 00:00:42,000 --> 00:00:46,000 of course you would not do that to replace a link 16 00:00:46,000 --> 00:00:50,000 but to navigate In code when some action completed 17 00:00:50,000 --> 00:00:54,000 when you parsed a forum that was submitted, for example 18 00:00:54,000 --> 00:00:57,000 but here to learn how imperative navigation works 19 00:00:57,000 --> 00:00:59,000 a button will do. 20 00:00:59,000 --> 00:01:00,000 So we have this button 21 00:01:02,000 --> 00:01:03,000 and when the button is clicked, we want to navigate away. 22 00:01:03,000 --> 00:01:05,000 So therefore, first of all 23 00:01:05,000 --> 00:01:07,000 we can define a number function here 24 00:01:07,000 --> 00:01:08,000 in this component function. 25 00:01:08,000 --> 00:01:11,000 So a nested function 26 00:01:11,000 --> 00:01:13,000 which should be triggered when the button is clicked. 27 00:01:13,000 --> 00:01:18,000 So the load project handler function, for example 28 00:01:20,000 --> 00:01:22,000 sign this function to this button here 29 00:01:22,000 --> 00:01:25,000 and we do this fruity on click prop. 30 00:01:25,000 --> 00:01:26,000 Again, that is just standard react, 31 00:01:26,000 --> 00:01:30,000 nothing next JS specific. 32 00:01:30,000 --> 00:01:33,000 Now in this function here, we might be doing all kinds 33 00:01:34,000 --> 00:01:36,000 of things, load data or anything like that. 34 00:01:36,000 --> 00:01:39,000 And once we're done, we want to navigate away. 35 00:01:39,000 --> 00:01:43,000 So when we do need to navigate in code, like we do here 36 00:01:43,000 --> 00:01:46,000 then we can again use this router object 37 00:01:46,000 --> 00:01:48,000 which we get from use router. 38 00:01:48,000 --> 00:01:51,000 And this object has a couple of properties 39 00:01:51,000 --> 00:01:53,000 a couple of values we already saw before 40 00:01:53,000 --> 00:01:57,000 but it also has a couple of methods that help us. 41 00:01:57,000 --> 00:01:58,000 For example, it has 42 00:01:58,000 --> 00:02:01,000 to Porsche method to navigate to a different page. 43 00:02:01,000 --> 00:02:06,000 So using router push is like using the link component 44 00:02:06,000 --> 00:02:09,000 just programmatically, and they offer here. 45 00:02:09,000 --> 00:02:14,000 We can then go to slash clients slash max slash project. 46 00:02:16,000 --> 00:02:21,000 A for example, if we now save this maximum Liam page 47 00:02:22,000 --> 00:02:25,000 and I click on load project a I'm taken to 48 00:02:25,000 --> 00:02:28,000 slash client slash max slash project. 49 00:02:30,000 --> 00:02:32,000 Okay? So that's how we can navigate programmatically. 50 00:02:33,000 --> 00:02:35,000 If we use a router replace instead of push 51 00:02:35,000 --> 00:02:39,000 then we replaced the current page with dead one 52 00:02:39,000 --> 00:02:42,000 which means we can't go back after the navigation. 53 00:02:43,000 --> 00:02:46,000 And we can also not just pass it in a string here 54 00:02:46,000 --> 00:02:50,000 but again, just as before for the link, we can also pass 55 00:02:50,000 --> 00:02:54,000 in an object here where we then set up path name two 56 00:02:54,000 --> 00:02:59,000 slash clients slash square brackets ID slash square bracket 57 00:03:02,000 --> 00:03:07,000 fly and project ID to encode these two dynamic segments 58 00:03:08,000 --> 00:03:12,000 into this path, and then set our query object 59 00:03:12,000 --> 00:03:15,000 to a nested object where we provide a concrete value 60 00:03:15,000 --> 00:03:18,000 for ID in this case, max 61 00:03:18,000 --> 00:03:21,000 and a concrete value for client project ID. 62 00:03:21,000 --> 00:03:23,000 In this case, let's say project a 63 00:03:25,000 --> 00:03:27,000 and the dead would simply be an alternative 64 00:03:27,000 --> 00:03:30,000 to creating or using a string. 65 00:03:30,000 --> 00:03:34,000 And if I do that and I go back and reload 66 00:03:34,000 --> 00:03:38,000 if I click load project, Hey, that still works. 67 00:03:38,000 --> 00:03:41,000 So that's how we can navigate programmatically 68 00:03:41,000 --> 00:03:45,000 which is also sometimes required, especially as mentioned 69 00:03:45,000 --> 00:03:48,000 for example, after submitting a form.