1 00:00:00,420 --> 00:00:00,960 Great. 2 00:00:00,960 --> 00:00:02,460 We understand the basics. 3 00:00:02,460 --> 00:00:05,300 We also cover the exact problem. 4 00:00:05,310 --> 00:00:09,210 Now let's talk about the error page and in order sure how it's gonna work. 5 00:00:09,210 --> 00:00:15,180 We're going to have to work to finish the application and let's imagine the scenario where a user navigates 6 00:00:15,180 --> 00:00:17,080 to a page that does not exist. 7 00:00:17,460 --> 00:00:23,010 So in my case I'm going to go with some kind of I don't know how logs or forward slash Oh so a user 8 00:00:23,010 --> 00:00:29,430 is trying to navigate there and instead of displaying nothing which would be a case right now in our 9 00:00:29,430 --> 00:00:34,110 current setup we're going to display the error page and we can place wherever we want within the error 10 00:00:34,110 --> 00:00:37,030 page and in my error page I just have ups. 11 00:00:37,050 --> 00:00:43,440 It's a dead end and then we have a link of navigating PECO again you can place whatever you would want 12 00:00:43,440 --> 00:00:44,560 within the half page. 13 00:00:44,640 --> 00:00:50,280 More important and please understand that we are doing this just so user doesn't have this experience 14 00:00:50,280 --> 00:00:52,590 where nothing is displayed on the screen. 15 00:00:52,590 --> 00:00:53,610 How can I see that. 16 00:00:53,610 --> 00:00:58,560 Well if we're going to head over to our current application and then instead of let's say navigating 17 00:00:58,560 --> 00:01:01,590 to a Bolton cart the two pages that we have. 18 00:01:01,740 --> 00:01:03,890 Let's say I'm gonna navigate to a hello. 19 00:01:04,070 --> 00:01:09,120 And like I said we're just gonna have the empty page which is not the best user experience. 20 00:01:09,180 --> 00:01:11,580 So how do we set up this error page. 21 00:01:11,580 --> 00:01:13,560 Well first of all we are to have the page. 22 00:01:13,650 --> 00:01:14,770 That's a good start. 23 00:01:14,850 --> 00:01:22,200 And then let's say as our route right after the cart I'm gonna have a route not going to have the path 24 00:01:22,200 --> 00:01:28,590 yet and then we're just going to place our error page somewhere say error page is gonna be displayed 25 00:01:28,590 --> 00:01:35,970 here and then in order to set up the full back page we need to use path and then we need to place a 26 00:01:35,970 --> 00:01:36,330 star. 27 00:01:36,330 --> 00:01:41,670 And if you're wondering where I'm getting the star from now let's head over to their official documentation 28 00:01:41,880 --> 00:01:44,310 and let's look for no match. 29 00:01:44,310 --> 00:01:48,910 And then I can see that around with the path of star all these matches. 30 00:01:49,020 --> 00:01:53,910 However now we're gonna have a different problem where each and every time I'm gonna navigate to let's 31 00:01:53,910 --> 00:02:00,690 say home more about our cart I'm always gonna have this error page because it always matches. 32 00:02:00,750 --> 00:02:06,840 So what would be the fix or the fix is gonna be using the switch component if you want to find out more 33 00:02:06,840 --> 00:02:13,680 about which component Harrower back docs look for the basic keep on scrolling and you can read the switch 34 00:02:13,680 --> 00:02:20,220 looks through all its children routes and then renders the first one whose path matches the current 35 00:02:20,220 --> 00:02:20,880 euro. 36 00:02:20,970 --> 00:02:23,730 So that's exactly scenario where we're looking for. 37 00:02:24,090 --> 00:02:29,670 So within the router again don't place it outside but place it within the router. 38 00:02:29,670 --> 00:02:31,050 We're going to place a switch. 39 00:02:31,200 --> 00:02:39,000 We're going to make sure that we wrap all our routes within the switch and then in this case we're only 40 00:02:39,030 --> 00:02:45,960 going to display the error if we're gonna navigate to a page that doesn't exist because remember Star 41 00:02:46,050 --> 00:02:52,350 always matched or in this case since let's say we're heading over to a homepage we only would want to 42 00:02:52,410 --> 00:02:59,060 render the road right route with a homepage and again switch is going to look through all its children 43 00:02:59,070 --> 00:03:04,500 route elements and then it's going to render the first one and in our case what is gonna be the first 44 00:03:04,500 --> 00:03:04,650 one. 45 00:03:05,040 --> 00:03:08,660 Well that's gonna be homepage if we're gonna do the same thing we're about. 46 00:03:08,790 --> 00:03:11,890 Again we're just gonna display the about like so. 47 00:03:11,930 --> 00:03:17,340 However if we're gonna navigate to a page that doesn't exist let's say again Hello we're gonna have 48 00:03:17,370 --> 00:03:24,450 hello from our page and that's how we can set up our four or four fallback using reactive router down.