1
00:00:02,000 --> 00:00:03,000
Now, which different paths

2
00:00:03,000 --> 00:00:06,000
could we support in this demo website?

3
00:00:06,000 --> 00:00:07,000
Well, of course I still want have

4
00:00:07,000 --> 00:00:10,000
the starting page where I show all posts,

5
00:00:10,000 --> 00:00:13,000
but I then also wanna be able to get to

6
00:00:13,000 --> 00:00:14,000
this new post page here,

7
00:00:14,000 --> 00:00:16,000
so that should be a separate page.

8
00:00:16,000 --> 00:00:19,000
Maybe still present it like this as a modal overlay

9
00:00:19,000 --> 00:00:21,000
but it should get its own path,

10
00:00:21,000 --> 00:00:23,000
its own URL.

11
00:00:23,000 --> 00:00:26,000
And I also wanna be able to click on my posts

12
00:00:26,000 --> 00:00:29,000
to load them in a modal on a detail page as well,

13
00:00:29,000 --> 00:00:33,000
so that I can also link to a single post if I want to.

14
00:00:33,000 --> 00:00:35,000
So I wanna have these three routes:

15
00:00:35,000 --> 00:00:37,000
starting page, new post page

16
00:00:37,000 --> 00:00:40,000
and post detail page if I click on a post.

17
00:00:40,000 --> 00:00:43,000
And therefore we need to tell React

18
00:00:43,000 --> 00:00:46,000
and React Router that we wanna have these three posts.

19
00:00:46,000 --> 00:00:50,000
We can do so, for example in main JSX,

20
00:00:50,000 --> 00:00:53,000
by first of all there importing something

21
00:00:53,000 --> 00:00:56,000
from react-router-dom.

22
00:00:56,000 --> 00:00:58,000
And the something we wanna import is

23
00:00:58,000 --> 00:01:02,000
the router provider component as it turns out.

24
00:01:03,000 --> 00:01:05,000
And you should render that component instead

25
00:01:05,000 --> 00:01:07,000
of the app component here.

26
00:01:08,000 --> 00:01:11,000
This enables Routing and tells React Router

27
00:01:11,000 --> 00:01:12,000
that it should watch the URL

28
00:01:12,000 --> 00:01:15,000
and start rendering different components

29
00:01:15,000 --> 00:01:16,000
for different paths.

30
00:01:16,000 --> 00:01:19,000
But just by adding it like this, it won't work.

31
00:01:19,000 --> 00:01:21,000
And that hopefully makes sense

32
00:01:21,000 --> 00:01:24,000
because of course you also must tell React Router

33
00:01:24,000 --> 00:01:27,000
which components should be loaded for which paths,

34
00:01:27,000 --> 00:01:29,000
so you must configure the router.

35
00:01:29,000 --> 00:01:32,000
That's why router provider takes a router prop

36
00:01:32,000 --> 00:01:35,000
which wants a route configuration object as a value.

37
00:01:36,000 --> 00:01:39,000
And that configuration object is created

38
00:01:39,000 --> 00:01:43,000
with a function imported from react-router-dom

39
00:01:43,000 --> 00:01:45,000
which is called create browser router.

40
00:01:46,000 --> 00:01:49,000
We can then call this function to create

41
00:01:49,000 --> 00:01:51,000
such a route configuration object

42
00:01:51,000 --> 00:01:53,000
and store that in a constant,

43
00:01:53,000 --> 00:01:55,000
and pass that constant,

44
00:01:55,000 --> 00:01:57,000
that configuration object value,

45
00:01:57,000 --> 00:02:01,000
as a value to the router prop on router provider.

46
00:02:02,000 --> 00:02:04,000
And now create browser router then

47
00:02:04,000 --> 00:02:06,000
takes an array as a value.

48
00:02:06,000 --> 00:02:08,000
And this is simply an array of

49
00:02:08,000 --> 00:02:10,000
all the routes you wanna have,

50
00:02:10,000 --> 00:02:12,000
a list of route definitions.

51
00:02:13,000 --> 00:02:16,000
And a route definition is simply an object.

52
00:02:17,000 --> 00:02:18,000
An object which typically should have

53
00:02:18,000 --> 00:02:21,000
a path property where you, for example,

54
00:02:21,000 --> 00:02:24,000
define the path of a single route.

55
00:02:24,000 --> 00:02:25,000
So we could have multiple objects here,

56
00:02:25,000 --> 00:02:29,000
and every object represents one route, one path,

57
00:02:29,000 --> 00:02:32,000
and the component that should be loaded for the path.

58
00:02:32,000 --> 00:02:35,000
So here we could have the path slash nothing

59
00:02:35,000 --> 00:02:38,000
as the main route, so to say,

60
00:02:38,000 --> 00:02:42,000
which then is loaded for our domain slash nothing,

61
00:02:42,000 --> 00:02:45,000
which is equal to just entering our domain.

62
00:02:45,000 --> 00:02:47,000
So that's of course one important route

63
00:02:47,000 --> 00:02:48,000
we wanna support here,

64
00:02:48,000 --> 00:02:50,000
and the path alone is not enough.

65
00:02:50,000 --> 00:02:53,000
Instead, you should also add the element property

66
00:02:53,000 --> 00:02:56,000
where you now define the JSX code

67
00:02:56,000 --> 00:02:58,000
that should be rendered on the screen

68
00:02:58,000 --> 00:03:00,000
when this route becomes active,

69
00:03:00,000 --> 00:03:03,000
so when this path is active.

70
00:03:03,000 --> 00:03:06,000
And here in my case that is simply

71
00:03:06,000 --> 00:03:07,000
the app component for the moment.

72
00:03:08,000 --> 00:03:11,000
So the component which we previously rendered there

73
00:03:11,000 --> 00:03:13,000
is now the component that should be rendered

74
00:03:13,000 --> 00:03:15,000
if the path is slash nothing.

75
00:03:16,000 --> 00:03:19,000
With this simple change, if we save everything

76
00:03:20,000 --> 00:03:22,000
the app still works as before

77
00:03:22,000 --> 00:03:26,000
because we load this app component for slash nothing.

78
00:03:26,000 --> 00:03:28,000
So that's of course not too impressive.

79
00:03:28,000 --> 00:03:31,000
But if I, for example, enter slash new

80
00:03:31,000 --> 00:03:33,000
I get an error instead,

81
00:03:33,000 --> 00:03:37,000
which already proves that something's going on here.

82
00:03:37,000 --> 00:03:40,000
React Router is doing something because indeed

83
00:03:40,000 --> 00:03:43,000
it is telling me that it did not find this route,

84
00:03:44,000 --> 00:03:45,000
and that makes sense because

85
00:03:45,000 --> 00:03:48,000
I only defined this slash nothing route,

86
00:03:48,000 --> 00:03:50,000
but that still works then.

87
00:03:50,000 --> 00:03:52,000
But of course we don't just want to add one route,

88
00:03:52,000 --> 00:03:54,000
we wouldn't gain much by that.

89
00:03:54,000 --> 00:03:56,000
Instead we want to have multiple routes,

90
00:03:56,000 --> 00:03:57,000
and for example we wanted to have

91
00:03:57,000 --> 00:04:00,000
a separate route for creating new posts.

92
00:04:01,000 --> 00:04:04,000
So how can we add this new post component

93
00:04:04,000 --> 00:04:05,000
as a separate route?

94
00:04:05,000 --> 00:04:09,000
Well, we can of course add a second route here

95
00:04:09,000 --> 00:04:12,000
to this create browser router function

96
00:04:12,000 --> 00:04:16,000
and then maybe have a path of create dash post.

97
00:04:16,000 --> 00:04:19,000
This path is of course totally up to you.

98
00:04:19,000 --> 00:04:20,000
And then here we could say that we wanna

99
00:04:20,000 --> 00:04:23,000
render an element and the element should be

100
00:04:23,000 --> 00:04:25,000
the new post component.

101
00:04:25,000 --> 00:04:28,000
For that you must import the new post component

102
00:04:28,000 --> 00:04:30,000
but then you can render it like this,

103
00:04:30,000 --> 00:04:31,000
and you can by the way

104
00:04:31,000 --> 00:04:34,000
render any JSX code of your choice here,

105
00:04:34,000 --> 00:04:36,000
could also be some h1 tags.

106
00:04:36,000 --> 00:04:38,000
But of course here in that case

107
00:04:38,000 --> 00:04:42,000
I wanna render the new post component like this.

108
00:04:42,000 --> 00:04:44,000
Now if I do that and I then enter

109
00:04:44,000 --> 00:04:47,000
create dash post here,

110
00:04:49,000 --> 00:04:52,000
I indeed see this new post component here,

111
00:04:52,000 --> 00:04:53,000
not as a modal

112
00:04:53,000 --> 00:04:55,000
and the rest of the app is gone.

113
00:04:55,000 --> 00:04:58,000
And it also doesn't really work

114
00:04:58,000 --> 00:04:59,000
because upon submitting,

115
00:04:59,000 --> 00:05:02,000
this prop value is not received anymore.

116
00:05:02,000 --> 00:05:06,000
This value for on add post is not received anymore

117
00:05:06,000 --> 00:05:08,000
because I'm using this component now

118
00:05:08,000 --> 00:05:10,000
without setting any props

119
00:05:10,000 --> 00:05:13,000
but it technically, generally, still works.

120
00:05:13,000 --> 00:05:16,000
At least I can see this component.

121
00:05:16,000 --> 00:05:20,000
But of course it's not rendered the way I'd like to see it.

122
00:05:20,000 --> 00:05:21,000
Instead, it should still be rendered

123
00:05:21,000 --> 00:05:24,000
as this overlay and this button should,

124
00:05:24,000 --> 00:05:26,000
of course, still lead there.

125
00:05:26,000 --> 00:05:28,000
And therefore we have to dive into

126
00:05:28,000 --> 00:05:31,000
another important feature offered by React Router

127
00:05:31,000 --> 00:05:34,000
and that's the feature of creating layout routes.