1
00:00:01,000 --> 00:00:03,000
Now, of course here, it would be nice

2
00:00:03,000 --> 00:00:07,000
if we could click on this backdrop and then go back

3
00:00:07,000 --> 00:00:10,000
to that detail page where we're coming from

4
00:00:10,000 --> 00:00:13,000
and we can implement this feature

5
00:00:13,000 --> 00:00:17,000
by adding a click listener on this modal backdrop div,

6
00:00:17,000 --> 00:00:21,000
and by then triggering some code that does take us back

7
00:00:21,000 --> 00:00:23,000
to the page we're coming from.

8
00:00:23,000 --> 00:00:28,000
So what we want to do here is navigate programmatically,

9
00:00:28,000 --> 00:00:28,000
you could say.

10
00:00:28,000 --> 00:00:32,000
We wanna trigger a navigation from inside our code,

11
00:00:32,000 --> 00:00:35,000
so not because the user clicked a link or

12
00:00:35,000 --> 00:00:39,000
because the user manually clicked the back button,

13
00:00:39,000 --> 00:00:42,000
but instead from inside our code

14
00:00:42,000 --> 00:00:44,000
because the user clicked this div.

15
00:00:45,000 --> 00:00:48,000
And to navigate programmatically,

16
00:00:48,000 --> 00:00:52,000
NextJS gives you the special use router hook,

17
00:00:52,000 --> 00:00:56,000
which must be imported from next slash navigation,

18
00:00:56,000 --> 00:01:01,000
not from some other package, but from next slash navigation.

19
00:01:02,000 --> 00:01:05,000
This gives you access to a router object,

20
00:01:05,000 --> 00:01:07,000
which then holds various methods

21
00:01:07,000 --> 00:01:10,000
for navigating around programmatically.

22
00:01:10,000 --> 00:01:13,000
For example, you can call the push method

23
00:01:13,000 --> 00:01:18,000
to push a new page onto the stack of pages.

24
00:01:18,000 --> 00:01:22,000
You can also manually refresh the page by calling refresh,

25
00:01:22,000 --> 00:01:26,000
but now it's actually this back method I'm interested in

26
00:01:26,000 --> 00:01:30,000
because if you call that, the user is navigated back

27
00:01:30,000 --> 00:01:32,000
to the page they're coming from,

28
00:01:33,000 --> 00:01:34,000
and that's what I want

29
00:01:34,000 --> 00:01:36,000
to do when the user clicks this backdrop.

30
00:01:36,000 --> 00:01:39,000
Therefore, here as a value for on click,

31
00:01:39,000 --> 00:01:42,000
I'll register this router back method.

32
00:01:42,000 --> 00:01:45,000
I'm not executing it here,

33
00:01:45,000 --> 00:01:48,000
so you should not add these parentheses.

34
00:01:48,000 --> 00:01:50,000
Instead, we just point at this method

35
00:01:50,000 --> 00:01:53,000
and it will therefore be executed for us

36
00:01:53,000 --> 00:01:56,000
whenever a click on this div occurs.

37
00:01:57,000 --> 00:01:59,000
Now, this use router hook, however,

38
00:01:59,000 --> 00:02:02,000
only works inside of client components.

39
00:02:02,000 --> 00:02:05,000
Therefore, we must now actually

40
00:02:05,000 --> 00:02:09,000
add this use client directive to the top

41
00:02:09,000 --> 00:02:10,000
of this file to make it work.

42
00:02:12,000 --> 00:02:14,000
But with that, if you reload,

43
00:02:14,000 --> 00:02:17,000
you of course are on the full screen details page,

44
00:02:17,000 --> 00:02:22,000
but if you go there by clicking around, this modal opens up

45
00:02:22,000 --> 00:02:24,000
and if you then click on the background here,

46
00:02:24,000 --> 00:02:26,000
you see it closes.

47
00:02:26,000 --> 00:02:29,000
But essentially that means that we are navigated back

48
00:02:29,000 --> 00:02:31,000
to the path we're coming from.

49
00:02:31,000 --> 00:02:35,000
You can also see how the path changes up here when I click

50
00:02:35,000 --> 00:02:37,000
on the backdrop.

51
00:02:37,000 --> 00:02:40,000
And that's how you can navigate around programmatically.