1 00:00:01,140 --> 00:00:03,540 ‫So, let's now create some links 2 00:00:03,540 --> 00:00:05,310 ‫between our different routes 3 00:00:05,310 --> 00:00:08,280 ‫in order to really turn our application 4 00:00:08,280 --> 00:00:11,253 ‫into a single page application. 5 00:00:13,050 --> 00:00:16,470 ‫So to start, let's say that on our homepage 6 00:00:16,470 --> 00:00:19,710 ‫we want a link to the pricing page. 7 00:00:19,710 --> 00:00:22,439 ‫So, how are we going to do that? 8 00:00:22,439 --> 00:00:26,580 ‫Well, let's try with the most obvious idea 9 00:00:26,580 --> 00:00:28,800 ‫that we might get which is to simply 10 00:00:28,800 --> 00:00:31,710 ‫create an anchor element here. 11 00:00:31,710 --> 00:00:35,313 ‫Basically creating a link in the traditional way. 12 00:00:36,150 --> 00:00:39,483 ‫So lets wrap this here into an h1, 13 00:00:42,078 --> 00:00:44,850 ‫and then after that, as I was just saying, 14 00:00:44,850 --> 00:00:49,850 ‫let's just create an anchor with the href property, 15 00:00:49,920 --> 00:00:53,823 ‫and maybe pointing to pricing. 16 00:00:55,933 --> 00:00:56,980 ‫Now lets close that 17 00:01:00,780 --> 00:01:01,683 ‫okay. 18 00:01:02,640 --> 00:01:06,390 ‫Now that's really huge again, right? 19 00:01:06,390 --> 00:01:10,353 ‫But anyway lets now try to click this and see what happens. 20 00:01:12,000 --> 00:01:15,960 ‫So, it actually did move to that page 21 00:01:15,960 --> 00:01:17,610 ‫but if you watched closely 22 00:01:17,610 --> 00:01:20,010 ‫then maybe you noticed that the whole page 23 00:01:20,010 --> 00:01:21,183 ‫actually reloaded. 24 00:01:22,020 --> 00:01:24,510 ‫So lets, see that again. 25 00:01:24,510 --> 00:01:26,580 ‫And so lets notice what happens really 26 00:01:26,580 --> 00:01:27,543 ‫when I click here. 27 00:01:28,980 --> 00:01:32,970 ‫So the page got reloaded and as we can also probably see 28 00:01:32,970 --> 00:01:34,803 ‫here in our network tab. 29 00:01:35,910 --> 00:01:40,230 ‫So if we select all here, and then do this 30 00:01:40,230 --> 00:01:43,203 ‫and come back, and clear this. 31 00:01:44,040 --> 00:01:46,620 ‫So again, I click here and you see that 32 00:01:46,620 --> 00:01:49,590 ‫all these different requests have been made. 33 00:01:49,590 --> 00:01:52,110 ‫And so this is not what we want. 34 00:01:52,110 --> 00:01:55,560 ‫We don't want any hard refreshes of our page. 35 00:01:55,560 --> 00:01:58,410 ‫But instead, we want to seamlessly move 36 00:01:58,410 --> 00:02:00,300 ‫from one page to the other 37 00:02:00,300 --> 00:02:04,143 ‫simply by replacing the dom content here on our page. 38 00:02:05,010 --> 00:02:07,590 ‫So, this is not what we want 39 00:02:07,590 --> 00:02:09,750 ‫so lets get rid of it and instead 40 00:02:09,750 --> 00:02:12,660 ‫we will now use the link element that is 41 00:02:12,660 --> 00:02:15,783 ‫once again provided by react router. 42 00:02:17,580 --> 00:02:22,580 ‫So, lets do that and lets make sure that it got imported. 43 00:02:22,680 --> 00:02:25,143 ‫And now here we can use the 'to' prop. 44 00:02:26,160 --> 00:02:30,700 ‫And so this is where we then specify /pricing 45 00:02:31,770 --> 00:02:35,190 ‫and it's important that we specify the slash here 46 00:02:35,190 --> 00:02:39,810 ‫so that our URL always starts from the root. 47 00:02:39,810 --> 00:02:42,693 ‫So basically we've got root/pricing. 48 00:02:45,690 --> 00:02:50,690 ‫Okay, so lets go back and let's reload here. 49 00:02:50,910 --> 00:02:53,970 ‫And now watch what happens as I click here 50 00:02:53,970 --> 00:02:55,260 ‫down there. 51 00:02:55,260 --> 00:02:58,380 ‫So I click, we moved to another page, 52 00:02:58,380 --> 00:03:02,790 ‫and we got no new requests except this svg here 53 00:03:02,790 --> 00:03:05,970 ‫for some reason, but that really doesn't matter. 54 00:03:05,970 --> 00:03:07,950 ‫So the only thing that really happened 55 00:03:07,950 --> 00:03:11,040 ‫was that all dom got replaced. 56 00:03:11,040 --> 00:03:14,973 ‫We can also see that nicely in our component tree now. 57 00:03:16,260 --> 00:03:19,800 ‫So lets go back, so now we have our home page 58 00:03:19,800 --> 00:03:20,970 ‫and as I click here 59 00:03:20,970 --> 00:03:23,310 ‫notice that the only thing that changed 60 00:03:23,310 --> 00:03:27,693 ‫was that immediately here our component tree changed. 61 00:03:29,370 --> 00:03:33,180 ‫Okay, and so that's how we use the link component 62 00:03:33,180 --> 00:03:37,740 ‫from react router to seamlessly transition between pages. 63 00:03:37,740 --> 00:03:41,193 ‫Making this now, a single page application. 64 00:03:42,120 --> 00:03:44,790 ‫Great, so 65 00:03:44,790 --> 00:03:47,010 ‫we can move now from the home page 66 00:03:47,010 --> 00:03:48,360 ‫to the pricing page 67 00:03:48,360 --> 00:03:51,243 ‫but what about all these other pages? 68 00:03:52,080 --> 00:03:54,870 ‫Well, lets just implement a page navigation, 69 00:03:54,870 --> 00:03:58,860 ‫which we can then reuse in all these pages here 70 00:03:58,860 --> 00:04:01,113 ‫so that we can transition between them. 71 00:04:02,550 --> 00:04:05,070 ‫So that's going to be a new component 72 00:04:05,070 --> 00:04:06,810 ‫but not a new page. 73 00:04:06,810 --> 00:04:10,888 ‫And so, let's come here and create a new folder 74 00:04:10,888 --> 00:04:14,730 ‫called "components", and so this is where 75 00:04:14,730 --> 00:04:19,680 ‫we will then create our PageNav.gsx component. 76 00:04:24,150 --> 00:04:26,310 ‫So lets scaffold that, and now here 77 00:04:26,310 --> 00:04:30,270 ‫we don't want a dif but a nav component. 78 00:04:30,270 --> 00:04:33,213 ‫And then lets do an unordered list, 79 00:04:35,280 --> 00:04:38,040 ‫and then, inside each list item 80 00:04:38,040 --> 00:04:41,553 ‫we are going to have one link to one of the pages. 81 00:04:42,630 --> 00:04:46,470 ‫So again, coming in here from react router dom 82 00:04:46,470 --> 00:04:48,965 ‫very important to not forget that, 83 00:04:48,965 --> 00:04:52,480 ‫and then, let's do one link to the homepage 84 00:04:54,930 --> 00:04:58,890 ‫and then I will just duplicate this a few more times. 85 00:04:58,890 --> 00:05:00,640 ‫So we have also 86 00:05:02,760 --> 00:05:03,593 ‫pricing 87 00:05:08,850 --> 00:05:11,703 ‫and lets do the product page. 88 00:05:16,740 --> 00:05:21,060 ‫Alright, and so now is a reusable component 89 00:05:21,060 --> 00:05:24,873 ‫that we can include into every single one of our pages. 90 00:05:26,490 --> 00:05:29,250 ‫So lets do that right here before the h1 91 00:05:29,250 --> 00:05:31,440 ‫and we could actually also include that 92 00:05:31,440 --> 00:05:33,240 ‫right here in the app. 93 00:05:33,240 --> 00:05:36,720 ‫So that would be perfectly valid as well. 94 00:05:36,720 --> 00:05:39,540 ‫So basically placing that right here 95 00:05:39,540 --> 00:05:41,430 ‫but the pages that I built 96 00:05:41,430 --> 00:05:44,070 ‫and that it will include here a bit later, 97 00:05:44,070 --> 00:05:46,860 ‫actually only work if we have the navigation 98 00:05:46,860 --> 00:05:49,470 ‫inside each of them. 99 00:05:49,470 --> 00:05:53,280 ‫And so, that's what we will then do now 100 00:05:53,280 --> 00:05:54,720 ‫just as I was saying. 101 00:05:54,720 --> 00:05:56,310 ‫So let's include that here 102 00:05:56,310 --> 00:06:00,270 ‫PageNav and this time here, vs code 103 00:06:00,270 --> 00:06:03,900 ‫is actually nice enough to automatically import 104 00:06:03,900 --> 00:06:05,103 ‫that here. 105 00:06:06,180 --> 00:06:09,183 ‫So, let's do it actually in all of them. 106 00:06:11,040 --> 00:06:12,640 ‫So let's include that right here 107 00:06:20,839 --> 00:06:22,590 ‫and now this is not in its own element 108 00:06:22,590 --> 00:06:25,320 ‫but, well that doesn't really matter. 109 00:06:25,320 --> 00:06:30,320 ‫Especially not in that uh component right there. 110 00:06:34,830 --> 00:06:38,680 ‫And here, let's just place that and some h1 element 111 00:06:43,860 --> 00:06:47,430 ‫and then let's copy the same thing also to 112 00:06:47,430 --> 00:06:49,170 ‫product, alright? 113 00:06:49,170 --> 00:06:52,020 ‫So, you know what it's best not to do that 114 00:06:52,020 --> 00:06:55,920 ‫because then we have to manually include the component 115 00:06:55,920 --> 00:06:57,573 ‫and that's too much work. 116 00:07:06,570 --> 00:07:07,403 ‫Okay, 117 00:07:08,940 --> 00:07:09,940 ‫and so 118 00:07:11,430 --> 00:07:12,263 ‫let's see. 119 00:07:14,280 --> 00:07:16,270 ‫Again, making it a bit smaller 120 00:07:17,610 --> 00:07:18,700 ‫and now 121 00:07:19,740 --> 00:07:21,930 ‫yeah, beautiful. 122 00:07:21,930 --> 00:07:24,990 ‫So we can really now seamlessly navigate 123 00:07:24,990 --> 00:07:26,580 ‫through our application 124 00:07:26,580 --> 00:07:28,110 ‫and nothing reloads 125 00:07:28,110 --> 00:07:30,810 ‫and it feels just really nice. 126 00:07:30,810 --> 00:07:33,210 ‫So our URL updates here 127 00:07:33,210 --> 00:07:36,990 ‫and therefore, if we now reload at exactly this place 128 00:07:36,990 --> 00:07:41,040 ‫then the page that we get back is back at pricing. 129 00:07:41,040 --> 00:07:43,110 ‫And so this then allows us, to for example, 130 00:07:43,110 --> 00:07:45,930 ‫share this URL with some other users 131 00:07:45,930 --> 00:07:48,120 ‫or to even bookmark this page. 132 00:07:48,120 --> 00:07:49,800 ‫And it will then each time, 133 00:07:49,800 --> 00:07:52,200 ‫come back to this exact page. 134 00:07:52,200 --> 00:07:54,900 ‫And so that's really really helpful. 135 00:07:54,900 --> 00:07:57,300 ‫Now, one thing that we do many times 136 00:07:57,300 --> 00:07:59,070 ‫in navigations like this 137 00:07:59,070 --> 00:08:03,600 ‫is to display which is the currently visited page. 138 00:08:03,600 --> 00:08:05,850 ‫So for example, highlighting right now 139 00:08:05,850 --> 00:08:06,960 ‫the pricing page 140 00:08:06,960 --> 00:08:09,630 ‫since this is the page that we are visiting. 141 00:08:09,630 --> 00:08:12,420 ‫And so, actually react router gives us 142 00:08:12,420 --> 00:08:13,773 ‫a tool for that. 143 00:08:14,850 --> 00:08:16,560 ‫So instead of using the link 144 00:08:16,560 --> 00:08:19,383 ‫we can use a NavLink element. 145 00:08:20,940 --> 00:08:23,040 ‫So, NavLink 146 00:08:23,040 --> 00:08:23,920 ‫like this 147 00:08:25,200 --> 00:08:26,910 ‫and let's remove this one 148 00:08:26,910 --> 00:08:31,110 ‫and replace all of them with NavLink. 149 00:08:31,110 --> 00:08:34,090 ‫And so, once again, I just selected all occurrences 150 00:08:34,980 --> 00:08:35,813 ‫here 151 00:08:35,813 --> 00:08:36,660 ‫with 152 00:08:36,660 --> 00:08:38,670 ‫here with this shortcut. 153 00:08:38,670 --> 00:08:40,710 ‫So this one I use all the time 154 00:08:40,710 --> 00:08:43,300 ‫really really important for any development 155 00:08:45,210 --> 00:08:47,790 ‫react or really anything else. 156 00:08:47,790 --> 00:08:50,760 ‫And so now, it works exactly the same thing 157 00:08:50,760 --> 00:08:54,600 ‫as before, but if we inspect this element 158 00:08:54,600 --> 00:08:59,600 ‫then we see, that, I think we had some space 159 00:08:59,970 --> 00:09:03,180 ‫so then we see that the currently active page 160 00:09:03,180 --> 00:09:05,640 ‫gets this class of active. 161 00:09:05,640 --> 00:09:09,510 ‫And so then in our css we can select this class 162 00:09:09,510 --> 00:09:12,450 ‫and style this element differently. 163 00:09:12,450 --> 00:09:15,159 ‫So this other link for example, the home, 164 00:09:15,159 --> 00:09:18,363 ‫that one does not get this class. 165 00:09:19,228 --> 00:09:22,290 ‫So if we change to product, 166 00:09:22,290 --> 00:09:25,710 ‫then it will be product who has that class. 167 00:09:25,710 --> 00:09:28,710 ‫Now, for now we don't have any css yet 168 00:09:28,710 --> 00:09:31,830 ‫because we will learn how to use a different way 169 00:09:31,830 --> 00:09:35,640 ‫of incorporating css into a project this time 170 00:09:35,640 --> 00:09:38,040 ‫but later, once we have that 171 00:09:38,040 --> 00:09:42,090 ‫then, we will be able to style this active class. 172 00:09:42,090 --> 00:09:45,510 ‫And speaking of css, that will actually be 173 00:09:45,510 --> 00:09:48,240 ‫the topic of our next lecture. 174 00:09:48,240 --> 00:09:51,450 ‫So how we can use different ways of css 175 00:09:51,450 --> 00:09:52,770 ‫in our applications 176 00:09:52,770 --> 00:09:54,420 ‫and so lets move there right now.