1
00:00:02,000 --> 00:00:03,000
So how can we make sure

2
00:00:03,000 --> 00:00:07,000
that clicking new post opens this new post modal?

3
00:00:07,000 --> 00:00:10,000
Well, we need to create a link between these two

4
00:00:10,000 --> 00:00:12,000
different routes in the end, and for that,

5
00:00:12,000 --> 00:00:14,000
we can go to the MainHeader component,

6
00:00:14,000 --> 00:00:16,000
which is where I have this button,

7
00:00:16,000 --> 00:00:19,000
and we now must edit this component a little bit.

8
00:00:19,000 --> 00:00:22,000
We must replace this button with a link

9
00:00:22,000 --> 00:00:25,000
to this /create-post route.

10
00:00:25,000 --> 00:00:27,000
That's in the end what we want to do.

11
00:00:28,000 --> 00:00:31,000
So for that, we could replace button with an anchor element,

12
00:00:31,000 --> 00:00:34,000
which is the right element for creating a link,

13
00:00:34,000 --> 00:00:36,000
and get rid of the on click handler

14
00:00:36,000 --> 00:00:39,000
and get rid of that prop, which we don't support anymore,

15
00:00:39,000 --> 00:00:42,000
and instead, add the ref attribute here

16
00:00:42,000 --> 00:00:45,000
and point at create-post.

17
00:00:46,000 --> 00:00:49,000
If we do that and save this, the styling's a bit off,

18
00:00:49,000 --> 00:00:52,000
we get this underline effect, but we can ignore that.

19
00:00:52,000 --> 00:00:55,000
If I click this, it seems to work,

20
00:00:55,000 --> 00:00:59,000
but I say it seems to work because actually,

21
00:00:59,000 --> 00:01:02,000
if you watch this refresh icon, if I click new post,

22
00:01:02,000 --> 00:01:05,000
you see it briefly change to a cross,

23
00:01:05,000 --> 00:01:08,000
which means that technically a brand new request was sent

24
00:01:08,000 --> 00:01:10,000
to the server serving this React app

25
00:01:10,000 --> 00:01:14,000
and we technically downloaded the entire React app again

26
00:01:14,000 --> 00:01:18,000
and started it as a new instance of that app, you could say,

27
00:01:18,000 --> 00:01:22,000
so it's just as if I manually pressed this refresh button.

28
00:01:22,000 --> 00:01:25,000
This works, but it means that we leave the single page

29
00:01:25,000 --> 00:01:27,000
application just to load it again,

30
00:01:27,000 --> 00:01:30,000
which means any global state would be lost,

31
00:01:30,000 --> 00:01:33,000
and we, of course, also unnecessarily download

32
00:01:33,000 --> 00:01:35,000
and execute all the JavaScript code again,

33
00:01:35,000 --> 00:01:37,000
which is not great for performance.

34
00:01:38,000 --> 00:01:41,000
For that reason, we want to stay in that single application

35
00:01:41,000 --> 00:01:44,000
world and just make sure that the URL changes

36
00:01:44,000 --> 00:01:46,000
and a new component gets loaded

37
00:01:46,000 --> 00:01:48,000
without sending a new request to the server

38
00:01:48,000 --> 00:01:50,000
serving the React app.

39
00:01:51,000 --> 00:01:53,000
And this is, of course, a common use case, and therefore,

40
00:01:53,000 --> 00:01:58,000
we can import the link component from react-router-dom.

41
00:01:59,000 --> 00:02:01,000
We should use this link component

42
00:02:01,000 --> 00:02:03,000
instead of the anchor element.

43
00:02:03,000 --> 00:02:05,000
Under the hood, this renders an anchor element,

44
00:02:05,000 --> 00:02:09,000
but it prevents the browser's default of sending a request.

45
00:02:09,000 --> 00:02:13,000
This link component doesn't take the ref attribute,

46
00:02:13,000 --> 00:02:16,000
but instead the to property, but we can and should

47
00:02:16,000 --> 00:02:18,000
then still target create-post.

48
00:02:19,000 --> 00:02:23,000
I'll also now briefly go to my main header module CSS file,

49
00:02:23,000 --> 00:02:25,000
and they are on button.

50
00:02:25,000 --> 00:02:29,000
I'll simply set text decoration to non

51
00:02:29,000 --> 00:02:30,000
to get rid of the underlining.

52
00:02:31,000 --> 00:02:34,000
But the more important part is the usage of link.

53
00:02:34,000 --> 00:02:39,000
With that, if we save this and we go back to /nothing

54
00:02:39,000 --> 00:02:43,000
and I click new post, you now see it did not reload

55
00:02:43,000 --> 00:02:45,000
the page, and you can also tell that it didn't do that

56
00:02:45,000 --> 00:02:50,000
by the fact that if I load this, you have this list of posts

57
00:02:50,000 --> 00:02:52,000
and if I click here, you see in the background,

58
00:02:52,000 --> 00:02:54,000
it's not re-fetched again.

59
00:02:54,000 --> 00:02:56,000
Instead, we're still on the same single page application,

60
00:02:56,000 --> 00:02:59,000
and that's, of course, the user experience we want to offer.

61
00:02:59,000 --> 00:03:02,000
It's way better than the other experience we had before.

62
00:03:04,000 --> 00:03:05,000
Of course, we now also want to make sure

63
00:03:05,000 --> 00:03:08,000
that we close this modal if we click the backdrop

64
00:03:08,000 --> 00:03:11,000
or if we click the cancel button.

65
00:03:11,000 --> 00:03:13,000
Also if we submit it, but submitting this

66
00:03:13,000 --> 00:03:16,000
and handing submission is something we'll handle later.

67
00:03:17,000 --> 00:03:20,000
Now, to also navigate when we click the backdrop

68
00:03:20,000 --> 00:03:23,000
of the modal, we can go to the modal component

69
00:03:23,000 --> 00:03:26,000
and there we can get rid of that onClose prop

70
00:03:26,000 --> 00:03:28,000
because we can actually handle clicks inside

71
00:03:28,000 --> 00:03:32,000
of that modal component now, assuming that we always use

72
00:03:32,000 --> 00:03:35,000
this modal to wrap a page with it,

73
00:03:35,000 --> 00:03:37,000
so, to use it as a wrapper inside of a route,

74
00:03:37,000 --> 00:03:40,000
and that we always want to go back to another route

75
00:03:40,000 --> 00:03:42,000
if we click on the backdrop.

76
00:03:43,000 --> 00:03:46,000
But if that is our assumption, we can add a function here,

77
00:03:46,000 --> 00:03:51,000
the closeHandler, which will be assigned to this onClick

78
00:03:51,000 --> 00:03:54,000
event listener on this backdrop diff.

79
00:03:55,000 --> 00:03:57,000
And in there, I now also want to navigate,

80
00:03:57,000 --> 00:04:00,000
but now we have to navigate programmatically here,

81
00:04:00,000 --> 00:04:04,000
because this is now not a link, but instead an action

82
00:04:04,000 --> 00:04:06,000
that's executed when we click a diff.

83
00:04:06,000 --> 00:04:09,000
We could replace the diff with a link,

84
00:04:09,000 --> 00:04:12,000
but here I'll stick to a diff also to show you

85
00:04:12,000 --> 00:04:14,000
how programmatic navigation works,

86
00:04:14,000 --> 00:04:17,000
because sometimes you must initiate navigation actions

87
00:04:17,000 --> 00:04:20,000
from inside code and this is how you can do it.

88
00:04:20,000 --> 00:04:25,000
You can import another feature, another function,

89
00:04:25,000 --> 00:04:28,000
from react-router-dom for that, and that function

90
00:04:28,000 --> 00:04:31,000
is actually a hook, the useNavigate hook,

91
00:04:32,000 --> 00:04:35,000
a hook provided by react-router-dom.

92
00:04:35,000 --> 00:04:37,000
In React, you don't just have the hooks

93
00:04:37,000 --> 00:04:38,000
that are built into React.

94
00:04:38,000 --> 00:04:40,000
Instead, you can also create your own hooks,

95
00:04:40,000 --> 00:04:43,000
and you learn how to do that in my course as well,

96
00:04:43,000 --> 00:04:46,000
and therefore third party packages like react-router-dom

97
00:04:46,000 --> 00:04:49,000
also can create and share hooks.

98
00:04:50,000 --> 00:04:53,000
Now, useNavigate can be executed to get hold

99
00:04:53,000 --> 00:04:56,000
of a navigate function, which I store in a constant here,

100
00:04:56,000 --> 00:04:58,000
but this one yet holds a function.

101
00:04:58,000 --> 00:05:01,000
Therefore, we can execute it as a function

102
00:05:01,000 --> 00:05:05,000
here in closeHandler, and then we pass the path to it

103
00:05:05,000 --> 00:05:09,000
to which we want to navigate when it's executed.

104
00:05:09,000 --> 00:05:12,000
And we could navigate to /nothing to make sure

105
00:05:12,000 --> 00:05:14,000
that if I click on the backdrop,

106
00:05:14,000 --> 00:05:16,000
I navigate back to the starting page.

107
00:05:17,000 --> 00:05:20,000
We could also make this more flexible and use

108
00:05:20,000 --> 00:05:23,000
a relative path and use two dots here,

109
00:05:23,000 --> 00:05:26,000
which works in the same way as two dots work

110
00:05:26,000 --> 00:05:29,000
in the terminal when using the CD command.

111
00:05:29,000 --> 00:05:32,000
You go up one level.

112
00:05:32,000 --> 00:05:33,000
It's the same here for routing.

113
00:05:33,000 --> 00:05:38,000
You can use this special relative path here to go up

114
00:05:38,000 --> 00:05:41,000
to the parent route, so to the route above this route

115
00:05:41,000 --> 00:05:43,000
that's currently active.

116
00:05:43,000 --> 00:05:45,000
This would make the modal a bit more dynamic.

117
00:05:45,000 --> 00:05:46,000
It's up to you what you want.

118
00:05:46,000 --> 00:05:49,000
Here I'll use this approach, and therefore,

119
00:05:49,000 --> 00:05:52,000
if this is loaded as part of the /create-post route,

120
00:05:52,000 --> 00:05:54,000
we would go up to the parent route,

121
00:05:54,000 --> 00:05:57,000
which is this slash route here.

122
00:05:58,000 --> 00:06:00,000
So therefore, now with that, if I save this all,

123
00:06:00,000 --> 00:06:03,000
we can still open and close the modal.

124
00:06:03,000 --> 00:06:06,000
We can also make sure that the cancel button

125
00:06:06,000 --> 00:06:07,000
closes the modal.

126
00:06:07,000 --> 00:06:10,000
for this, we can go to the NewPost component again,

127
00:06:10,000 --> 00:06:13,000
which is where we have this cancel button,

128
00:06:13,000 --> 00:06:15,000
and we could now also initiate programmatic

129
00:06:15,000 --> 00:06:18,000
navigation here again, but here in the end,

130
00:06:18,000 --> 00:06:21,000
it makes more sense to render a link again.

131
00:06:21,000 --> 00:06:25,000
Therefore, we can again import the link component

132
00:06:25,000 --> 00:06:30,000
from react-router-dom and then replace this button

133
00:06:30,000 --> 00:06:35,000
down there with this link, get rid of the onClick

134
00:06:35,000 --> 00:06:40,000
event listener now, and therefore also actually get rid of

135
00:06:40,000 --> 00:06:43,000
the onCancel prop up here, because we're not using

136
00:06:43,000 --> 00:06:44,000
that prop anymore.

137
00:06:45,000 --> 00:06:48,000
And now we can go back to this link,

138
00:06:48,000 --> 00:06:52,000
add the to prop, and tell react-router where to navigate

139
00:06:52,000 --> 00:06:54,000
to when this is clicked, and here we could again

140
00:06:54,000 --> 00:06:57,000
use two dots to simply go up to the parent route,

141
00:06:57,000 --> 00:07:00,000
which is the same as adding a slash here

142
00:07:00,000 --> 00:07:02,000
as an absolute path, in this case.

143
00:07:02,000 --> 00:07:06,000
It's up to you what you want to do, both works.

144
00:07:06,000 --> 00:07:08,000
So now with that, styling is a bit off,

145
00:07:08,000 --> 00:07:11,000
but if I click cancel we now also close it.

146
00:07:12,000 --> 00:07:16,000
Now, to fix the styling, you find an updated

147
00:07:16,000 --> 00:07:18,000
NewPost module CSS file attached,

148
00:07:18,000 --> 00:07:20,000
and you can simply grab the content off that

149
00:07:20,000 --> 00:07:24,000
and replace your NewPost module CSS content with it.

150
00:07:26,000 --> 00:07:29,000
If you do that, you will see that now

151
00:07:29,000 --> 00:07:31,000
styling looks better again.

152
00:07:32,000 --> 00:07:36,000
So that's how we can navigate between our different routes,

153
00:07:36,000 --> 00:07:39,000
and now we got almost the same behavior as before,

154
00:07:39,000 --> 00:07:43,000
but now with the advantage of having shareable URLs

155
00:07:43,000 --> 00:07:45,000
and with the routing being used for linking

156
00:07:45,000 --> 00:07:49,000
these different parts, and that's actually a big improvement

157
00:07:49,000 --> 00:07:52,000
over what we had before, because it means that we can now

158
00:07:52,000 --> 00:07:56,000
share links to the different pages that make up this app,

159
00:07:56,000 --> 00:07:58,000
and of course, the more complex your React apps are,

160
00:07:58,000 --> 00:08:02,000
the more likely it is that you need such shareable links

161
00:08:02,000 --> 00:08:04,000
and that you want to use routing

162
00:08:04,000 --> 00:08:06,000
for loading different parts of the website.