1 00:00:00,420 --> 00:00:02,880 Great ones who are familiar with our star project. 2 00:00:03,360 --> 00:00:05,700 Let's kick things into gear by setting up our routing. 3 00:00:06,360 --> 00:00:09,330 Now, our page routing is going to be a bit specific. 4 00:00:09,850 --> 00:00:15,750 Since we're not going to have a traditional nav bar with all the links and then the user can just navigate 5 00:00:15,750 --> 00:00:18,300 from patient page by clicking on those links. 6 00:00:18,660 --> 00:00:25,410 Since we're using authentication, but nevertheless, we need some kind of routing so we can display 7 00:00:25,410 --> 00:00:27,810 different pages, one for dashboard logging. 8 00:00:28,160 --> 00:00:34,530 And of course, the error page forward at our weapon of choice is going to be arguably most popular. 9 00:00:34,530 --> 00:00:38,570 React routing library out there by the name of React Router Dom. 10 00:00:39,270 --> 00:00:44,460 If you want to learn more about library, feel free to follow link that I provided in Orien Me. 11 00:00:44,850 --> 00:00:46,990 But of course I'm going to cover Step-By-Step. 12 00:00:47,580 --> 00:00:50,430 Everything we will need to know in order to set up our project. 13 00:00:51,210 --> 00:00:55,240 Just keep in mind that for this project we are using version 5.2. 14 00:00:55,770 --> 00:01:01,620 So if the docs are a bit different by the time you're watching this while they have new version. 15 00:01:01,890 --> 00:01:08,640 So if you are starting some new project from scratch and install the latest version, syntax might be 16 00:01:08,760 --> 00:01:09,180 different. 17 00:01:09,630 --> 00:01:12,650 With that said, how does a react router dom work? 18 00:01:13,200 --> 00:01:18,190 Well, if we navigate to address the moment, we can see that we have three pages. 19 00:01:18,750 --> 00:01:19,790 We have a dashboard page. 20 00:01:19,800 --> 00:01:21,780 We have log in page and we have the Arrow Bridge. 21 00:01:22,260 --> 00:01:27,780 Granted, there is not much in those pages, but at least we can see all the pages. 22 00:01:27,820 --> 00:01:32,160 However, our goal is following where we would want to have a dashboard page. 23 00:01:32,430 --> 00:01:38,320 Now, if the user navigates to some kind of page that doesn't exist, for example, that would be hello. 24 00:01:38,880 --> 00:01:46,440 You'll notice that we'll kick the user to a page and now he or she has an option of returning to our 25 00:01:46,440 --> 00:01:46,920 homepage. 26 00:01:47,250 --> 00:01:48,510 So we click back home. 27 00:01:48,900 --> 00:01:50,550 And of course, we navigate back home. 28 00:01:50,760 --> 00:01:54,090 So this is going to be our home bridge where we have the dashboard. 29 00:01:54,540 --> 00:02:02,520 Now, we also have an option of locking out the user and then we kick back the user to a logging page. 30 00:02:02,880 --> 00:02:09,060 So from this page, now the user needs to log in and line once he or she logs. 31 00:02:09,060 --> 00:02:15,060 And then, of course, we display the dashboard again and want to set up a react router. 32 00:02:15,210 --> 00:02:16,560 We need three things. 33 00:02:17,070 --> 00:02:25,380 We need a browser router, which usually is given an alias of router and switch, as well as the root 34 00:02:25,620 --> 00:02:26,190 components. 35 00:02:26,850 --> 00:02:32,220 And what we would want to do is wrap our components in the router. 36 00:02:32,630 --> 00:02:39,660 So let me remove this one and I'm just gonna type here router and then if would want to display a separate 37 00:02:39,660 --> 00:02:40,130 route. 38 00:02:40,530 --> 00:02:43,020 We would need to use a raw out component. 39 00:02:43,530 --> 00:02:48,180 Now, I'm going to talk about the error because it's a little bit different in the next video. 40 00:02:48,540 --> 00:02:51,030 So for the time being, which is going to remove it. 41 00:02:51,210 --> 00:02:54,240 But don't worry, we'll add it back in the next video. 42 00:02:54,660 --> 00:02:56,640 But set up our basic Kraut's. 43 00:02:57,000 --> 00:03:01,860 We simply need to have our gear out component and line within that Tharaud component. 44 00:03:02,190 --> 00:03:05,640 We need to display which our component we would want to render. 45 00:03:06,090 --> 00:03:10,780 So in this case, I would want to render Dashboard and I'm going to do the same thing for the Log-in, 46 00:03:11,000 --> 00:03:12,900 since these are the two pages that I'm using. 47 00:03:13,200 --> 00:03:13,800 So notice. 48 00:03:14,880 --> 00:03:19,320 I have my component rod component and then within that rod component. 49 00:03:19,860 --> 00:03:22,610 I'm placing the component that I would want to render. 50 00:03:23,190 --> 00:03:28,470 Now, we're not done, though, because if we save course, we still render both. 51 00:03:28,770 --> 00:03:31,110 We have dashboard page and the log in page. 52 00:03:31,470 --> 00:03:34,860 So in order to set up separate pages, we would need to add the path. 53 00:03:35,310 --> 00:03:39,780 So essentially, we're telling the reactor, our dome, where we would want to navigate. 54 00:03:40,240 --> 00:03:44,230 And remember when I said that the dashboard is going to be a home bridge. 55 00:03:44,580 --> 00:03:47,450 So for the home page, the route is going to be falling. 56 00:03:47,890 --> 00:03:49,400 And it's gonna be forward slash. 57 00:03:49,920 --> 00:03:52,500 Now, the properties we're looking for is path. 58 00:03:53,190 --> 00:03:57,060 And then as far as the value for the home bridge, we just have a forward slash. 59 00:03:57,480 --> 00:03:59,700 So this just means our domain. 60 00:04:00,120 --> 00:04:04,590 So whatever our domain is, that is our homepage online for the logging. 61 00:04:04,980 --> 00:04:10,080 You'll notice that in the URL we have the domain forward slash logging. 62 00:04:10,710 --> 00:04:11,520 So the same thing. 63 00:04:11,730 --> 00:04:16,490 We have a path prop and then we'll just pass in for its Lasch logging. 64 00:04:16,830 --> 00:04:20,180 Now again, you're going to right here, grandma, dear. 65 00:04:20,640 --> 00:04:21,420 It doesn't matter. 66 00:04:22,320 --> 00:04:24,060 It's just this place in the euro. 67 00:04:24,450 --> 00:04:25,800 Once you navigate to that page. 68 00:04:26,250 --> 00:04:28,020 So, for example, if I log out. 69 00:04:28,650 --> 00:04:32,190 Notice how I kick back my user to a log in page. 70 00:04:32,280 --> 00:04:33,510 Notice the domain. 71 00:04:33,780 --> 00:04:35,010 And then forward slash logging. 72 00:04:35,610 --> 00:04:37,890 So essentially you can write here wherever you'd want. 73 00:04:38,490 --> 00:04:40,470 It's the component that is important. 74 00:04:40,950 --> 00:04:45,820 So if you have the you are all of logging, then of course, if you place here a logging component, 75 00:04:46,210 --> 00:04:48,780 while that is going to be the component that is displayed. 76 00:04:49,140 --> 00:04:53,730 So once we served notice, now we're displaying the home page only. 77 00:04:54,120 --> 00:04:54,440 Correct. 78 00:04:54,990 --> 00:05:00,870 Because we said that we have a rock component and line for the path, which is our domain. 79 00:05:01,410 --> 00:05:07,590 We will display as a homepage our dashboard component, which essentially is our page. 80 00:05:08,020 --> 00:05:10,290 Now, if we navigate to a logging. 81 00:05:10,640 --> 00:05:12,100 And let me see your man and he? 82 00:05:12,100 --> 00:05:18,270 S in this case, we'll have to do a bit of navigating around in your albar because like I said, we're 83 00:05:18,270 --> 00:05:20,180 not going to have a traditional bar. 84 00:05:20,700 --> 00:05:24,040 So sorry for your little inconvenience, but that's just how it's gonna be. 85 00:05:24,340 --> 00:05:30,420 And in here, let me type log in and now you'll notice something interesting where I am displaying the 86 00:05:30,420 --> 00:05:31,860 log in page one. 87 00:05:31,890 --> 00:05:34,170 I'm also displaying a dashboard page. 88 00:05:34,620 --> 00:05:35,520 So what's up with that? 89 00:05:36,030 --> 00:05:38,640 Well, if we're looking at our path. 90 00:05:39,180 --> 00:05:42,810 Notice all the homepage actually matches the log in as well. 91 00:05:43,200 --> 00:05:46,500 And in order to fix that, we just simply need to add another prop. 92 00:05:47,010 --> 00:05:48,870 And the name of this prop is exact. 93 00:05:49,380 --> 00:05:59,070 And here what we're saying is that only navigate to the home page to forward slash if it is the exact 94 00:05:59,290 --> 00:06:03,720 YORO, not if it matches something in the log in as well. 95 00:06:04,120 --> 00:06:09,390 And once you say if you'll notice that if we navigate you forward such logging, then of course we are 96 00:06:09,390 --> 00:06:10,710 displaying the log in page. 97 00:06:11,160 --> 00:06:16,050 Or if we go back to a homepage, we are displaying a dashboard page. 98 00:06:16,590 --> 00:06:17,730 So three things. 99 00:06:17,730 --> 00:06:18,590 We need the router. 100 00:06:18,900 --> 00:06:26,100 We need a route and line path for every component we would want to display whether that is going to 101 00:06:26,100 --> 00:06:31,620 be homepage where we are displaying dashboard or log in page, where we're going to be displaying a 102 00:06:31,620 --> 00:06:32,340 log in component. 103 00:06:32,850 --> 00:06:37,140 And of course, also the exact prop set to true. 104 00:06:37,440 --> 00:06:43,110 Now, if you want, you can add also exact true to a logging, for example, if you would have some 105 00:06:43,110 --> 00:06:44,040 more nested droughts. 106 00:06:44,430 --> 00:06:46,110 But in our case, of course, we don't have that. 107 00:06:46,410 --> 00:06:47,610 That's why I'll skip it. 108 00:06:48,030 --> 00:06:49,350 So this should be our basic setup. 109 00:06:49,690 --> 00:06:51,810 And now we can talk about the error page.