1 00:00:01,420 --> 00:00:05,860 We've got some basic navigation now working inside of our app, but it's not quite perfect. 2 00:00:06,070 --> 00:00:06,860 Let me tell you why. 3 00:00:07,880 --> 00:00:09,470 I've got my network request log open. 4 00:00:09,590 --> 00:00:13,190 I'm filtered by all requests and I've cleared my request log out. 5 00:00:13,670 --> 00:00:17,240 I'm then going to click on one these links and when I do so, you'll see that a variety of different 6 00:00:17,240 --> 00:00:18,380 requests are being issued. 7 00:00:19,070 --> 00:00:22,490 I'm going to clear my request log again and click on another link. 8 00:00:23,300 --> 00:00:28,610 So every single time that I click on one of these links, I'm making a wide variety of different quests. 9 00:00:29,300 --> 00:00:32,660 Well, let's understand why that is and why it might not be the best thing. 10 00:00:33,960 --> 00:00:40,290 OK, so this diagram right here is meant to represent a traditional normal H.T., male based Web application. 11 00:00:40,770 --> 00:00:45,330 So not react or anything like that in a normal Web application. 12 00:00:45,360 --> 00:00:51,210 So kind of a traditional Web app consisting of a variety of different A.T.M. documents you might navigate 13 00:00:51,210 --> 00:00:52,920 to some Web page inside of your browser. 14 00:00:53,580 --> 00:00:58,570 Whenever you navigate to a page, your browser makes a request off to some server and gets back in HD 15 00:00:58,580 --> 00:00:59,460 mail document. 16 00:01:00,840 --> 00:01:03,280 The H.G. Wells then passed and displayed on the screen. 17 00:01:03,880 --> 00:01:08,290 Any appropriate script tags are loaded up along with any appropriate CSF tags as well. 18 00:01:09,040 --> 00:01:14,650 Then whenever a user clicks on a link, your browser makes an entire nother request to another server 19 00:01:14,970 --> 00:01:17,170 and gets back another HD mail document. 20 00:01:17,800 --> 00:01:21,560 And again, that Estill document might have its own set of script tags and CSX. 21 00:01:22,450 --> 00:01:25,450 But this is how a traditional Web page handles navigation. 22 00:01:25,750 --> 00:01:28,150 We provide normal links whenever you click on a link. 23 00:01:28,180 --> 00:01:30,220 You load up another HMO document. 24 00:01:30,910 --> 00:01:33,850 And this is exactly what is happening inside of our app right now. 25 00:01:34,420 --> 00:01:40,090 Whenever we click on one these links, we completely reload the entire index, not HMO file inside of 26 00:01:40,090 --> 00:01:44,380 our project and reload all the JavaScript in all the C SS as well. 27 00:01:45,220 --> 00:01:48,250 Now, that is not ideal inside of a react application. 28 00:01:48,880 --> 00:01:53,860 We have already, when we first come to our application, loaded up our indexed DOT, HDMI file, all 29 00:01:53,860 --> 00:01:55,540 the JavaScript, all the C SS. 30 00:01:56,100 --> 00:02:01,900 There is no reason in a react app for us to do a hard reload of the page and reload all these different 31 00:02:01,900 --> 00:02:09,100 assets instead will be really ideal is if we could click on one these links, update the URL but not 32 00:02:09,100 --> 00:02:16,540 do a full page reload because a full page reload causes a whole bunch of network traffic that is not 33 00:02:16,540 --> 00:02:20,260 required just to change some very basic content on the screen. 34 00:02:21,970 --> 00:02:26,860 Let's take a look at a diagram and understand how we might better approach this problem of navigation. 35 00:02:28,160 --> 00:02:28,820 All right, here we go. 36 00:02:29,970 --> 00:02:35,520 So we're going to imagine what would ideally occur if a user is at local those three thousand and then 37 00:02:35,520 --> 00:02:41,430 clicked on the list link, if I clicked on that list link right there and went over to this other page. 38 00:02:41,850 --> 00:02:44,330 Here it is, ideally what we would do inside of rap. 39 00:02:45,270 --> 00:02:51,120 So first, a user would click on that list link and then ideally we would change the URL but not do 40 00:02:51,120 --> 00:02:52,860 a full page refresh. 41 00:02:53,160 --> 00:02:58,020 So in other words, ideally, we would not make all these additional requests because we've already 42 00:02:58,020 --> 00:03:01,230 loaded up all that JavaScript and all that CSX into our app. 43 00:03:02,660 --> 00:03:07,130 Then each root component ideally could somehow detect that the oil has changed. 44 00:03:07,820 --> 00:03:13,640 We could then possibly have each root component update some piece of state that is tracking the current 45 00:03:13,640 --> 00:03:14,240 path name. 46 00:03:15,910 --> 00:03:21,280 When we update some piece of state, each route could then re render and show the appropriate or hide 47 00:03:21,310 --> 00:03:22,570 the appropriate components. 48 00:03:23,320 --> 00:03:29,140 So in other words, whenever we click on some link inside of application in a react app, we just plain 49 00:03:29,200 --> 00:03:31,450 do not want to refresh the entire page. 50 00:03:32,110 --> 00:03:34,600 All we want to do is update the URL somehow. 51 00:03:35,830 --> 00:03:38,650 And somehow get all of our different routes to update as well. 52 00:03:38,770 --> 00:03:45,910 But we don't want to reload the index dot e-mail or all the associated CSX and J.S. That is the next 53 00:03:45,910 --> 00:03:47,410 big challenge that we're gonna figure out. 54 00:03:47,770 --> 00:03:53,590 We want to somehow click on a link, make the URL update, but not refresh or update all this different 55 00:03:53,590 --> 00:03:54,100 content. 56 00:03:54,770 --> 00:03:56,470 So let's figure out that in the next video.