1 00:00:01,200 --> 00:00:03,660 ‫Now it's time to take the usefulness 2 00:00:03,660 --> 00:00:06,630 ‫of React Router to the next level 3 00:00:06,630 --> 00:00:09,810 ‫by actually storing state in the URL 4 00:00:09,810 --> 00:00:12,420 ‫so that we can use it in different places 5 00:00:12,420 --> 00:00:13,773 ‫of the application. 6 00:00:15,450 --> 00:00:19,830 ‫But you might be wondering, "Storing state in the URL, 7 00:00:19,830 --> 00:00:24,420 ‫don't we actually use the useState hook to manage state?" 8 00:00:24,420 --> 00:00:27,600 ‫Well, that's true most of the time. 9 00:00:27,600 --> 00:00:31,650 ‫But the URL is actually also an excellent place 10 00:00:31,650 --> 00:00:36,060 ‫to store a state and especially UI state. 11 00:00:36,060 --> 00:00:37,680 ‫And with UI state, 12 00:00:37,680 --> 00:00:41,520 ‫I mean state that affects what the UI looks like. 13 00:00:41,520 --> 00:00:44,850 ‫So things like an open or closed panel, 14 00:00:44,850 --> 00:00:49,470 ‫or a currently applied list sorting order or filter. 15 00:00:49,470 --> 00:00:52,740 ‫So these examples of state are great candidates 16 00:00:52,740 --> 00:00:56,940 ‫to be stored in the URL and basically to be managed 17 00:00:56,940 --> 00:00:59,613 ‫by the URL with React Router. 18 00:01:00,577 --> 00:01:04,890 ‫"Now, why would we want to do that?" You might be asking. 19 00:01:04,890 --> 00:01:08,700 ‫And that's again an excellent question. 20 00:01:08,700 --> 00:01:11,550 ‫So the first reason is that placing state 21 00:01:11,550 --> 00:01:15,180 ‫in the URL is an easy way to store state 22 00:01:15,180 --> 00:01:18,450 ‫in a global place that is easily accessible 23 00:01:18,450 --> 00:01:21,300 ‫to all components in the app. 24 00:01:21,300 --> 00:01:25,530 ‫So before, if we wanted state to be accessible everywhere, 25 00:01:25,530 --> 00:01:28,320 ‫we would have to store it in a parent component 26 00:01:28,320 --> 00:01:30,480 ‫and then pass it all the way down 27 00:01:30,480 --> 00:01:33,960 ‫to all child components using props. 28 00:01:33,960 --> 00:01:36,600 ‫But if we place state in the URL, 29 00:01:36,600 --> 00:01:39,660 ‫we can easily just read the value from there, 30 00:01:39,660 --> 00:01:43,590 ‫wherever the component is in the component tree. 31 00:01:43,590 --> 00:01:46,980 ‫So basically we can move some state management 32 00:01:46,980 --> 00:01:50,490 ‫from React to the URL. 33 00:01:50,490 --> 00:01:55,080 ‫Also, placing state in the URL is, in many situations, 34 00:01:55,080 --> 00:01:58,320 ‫a good way to pass data from one page 35 00:01:58,320 --> 00:02:01,050 ‫into the next page without having to store 36 00:02:01,050 --> 00:02:05,550 ‫that data in some temporary place inside the app. 37 00:02:05,550 --> 00:02:08,730 ‫And finally, another amazing reason why we 38 00:02:08,730 --> 00:02:12,450 ‫should place UI state right in the URL 39 00:02:12,450 --> 00:02:14,670 ‫is that doing so makes it possible 40 00:02:14,670 --> 00:02:19,500 ‫to bookmark or to share the page with the exact UI state 41 00:02:19,500 --> 00:02:21,840 ‫that the page had at the time 42 00:02:21,840 --> 00:02:25,230 ‫that we are sharing or bookmarking it. 43 00:02:25,230 --> 00:02:27,480 ‫For example, in an online shop, 44 00:02:27,480 --> 00:02:31,710 ‫we might be filtering products by color and by price. 45 00:02:31,710 --> 00:02:34,980 ‫And if that filter is saved in the URL, 46 00:02:34,980 --> 00:02:37,650 ‫we can then share the page with someone 47 00:02:37,650 --> 00:02:40,680 ‫and they will see the exact same filters applied 48 00:02:40,680 --> 00:02:42,870 ‫to the list of products. 49 00:02:42,870 --> 00:02:45,390 ‫So that's really helpful and enables 50 00:02:45,390 --> 00:02:47,970 ‫a great user experience. 51 00:02:47,970 --> 00:02:50,430 ‫Now, okay but enough talking, 52 00:02:50,430 --> 00:02:55,170 ‫let's see how we can actually do this using React Router. 53 00:02:55,170 --> 00:02:58,740 ‫So in a URL like this, we already know 54 00:02:58,740 --> 00:03:03,740 ‫that we have a path, for example, app/cities, 55 00:03:03,780 --> 00:03:06,660 ‫and we can consider this part state 56 00:03:06,660 --> 00:03:09,090 ‫because it corresponds to the component 57 00:03:09,090 --> 00:03:11,280 ‫that is currently being displayed. 58 00:03:11,280 --> 00:03:15,690 ‫But this part is not really useful for state management 59 00:03:15,690 --> 00:03:18,510 ‫in the way that they have been describing. 60 00:03:18,510 --> 00:03:21,840 ‫So for actually storing state in the URL, 61 00:03:21,840 --> 00:03:25,500 ‫we use Params or the Query string. 62 00:03:25,500 --> 00:03:28,920 ‫Now Params, which stands for parameters 63 00:03:28,920 --> 00:03:32,580 ‫are very useful to pass data to the next page 64 00:03:32,580 --> 00:03:36,480 ‫while the Query string is useful to store some global state 65 00:03:36,480 --> 00:03:39,120 ‫that should be accessible everywhere. 66 00:03:39,120 --> 00:03:41,070 ‫But to understand this a bit better, 67 00:03:41,070 --> 00:03:43,923 ‫let's look at this example in more detail. 68 00:03:45,270 --> 00:03:48,990 ‫So this URL that we just looked at corresponds 69 00:03:48,990 --> 00:03:52,800 ‫to this view, and in the URL you see 70 00:03:52,800 --> 00:03:55,230 ‫that the Param is Lisbon. 71 00:03:55,230 --> 00:03:58,680 ‫And so because of that, the page that was loaded 72 00:03:58,680 --> 00:04:02,580 ‫is exactly about the city of Lisbon. 73 00:04:02,580 --> 00:04:06,240 ‫So by creating a link that points to a URL 74 00:04:06,240 --> 00:04:09,750 ‫with this Param, we are able to pass the city name 75 00:04:09,750 --> 00:04:14,640 ‫to the next page whenever the user clicks on that link. 76 00:04:14,640 --> 00:04:18,600 ‫And of course, if the URL had another city name 77 00:04:18,600 --> 00:04:21,630 ‫as the Param, let's say Berlin 78 00:04:21,630 --> 00:04:25,230 ‫then the loaded page would be about Berlin. 79 00:04:25,230 --> 00:04:29,820 ‫And so that's the power of Params but there is more 80 00:04:29,820 --> 00:04:32,280 ‫because we also have the Query string, 81 00:04:32,280 --> 00:04:35,100 ‫and it works in a very similar way. 82 00:04:35,100 --> 00:04:36,720 ‫So in this example, 83 00:04:36,720 --> 00:04:41,720 ‫we store the LAt and LNG pieces of state in a Query string 84 00:04:42,120 --> 00:04:45,960 ‫which corresponds to disposition on the map. 85 00:04:45,960 --> 00:04:50,250 ‫And the same is true, of course, for the other URL. 86 00:04:50,250 --> 00:04:53,070 ‫So each of these cities has, of course, 87 00:04:53,070 --> 00:04:54,510 ‫a unique location, 88 00:04:54,510 --> 00:04:58,770 ‫and that location is reflected right in the URL. 89 00:04:58,770 --> 00:05:02,040 ‫And so in this example, we leverage the power 90 00:05:02,040 --> 00:05:05,790 ‫of the URL to manage state in an effective way 91 00:05:05,790 --> 00:05:09,510 ‫by reading the city name and the GPS location 92 00:05:09,510 --> 00:05:11,850 ‫from the URL instead 93 00:05:11,850 --> 00:05:15,393 ‫of using application state inside React. 94 00:05:16,320 --> 00:05:19,770 ‫Now this probably looks all a bit confusing 95 00:05:19,770 --> 00:05:21,660 ‫which is why we're gonna have plenty 96 00:05:21,660 --> 00:05:25,260 ‫of opportunity to practice all this throughout the rest 97 00:05:25,260 --> 00:05:28,563 ‫of the course starting in the next video.