Displaying 404 Error Routes using Switch

[MUSIC] 0:00 In the previous stages, you learned the most important parts about React Router. 0:04 All your routes are in place and 0:08 users can seamlessly navigate through the directory app. 0:10 But there's still more to explore in React Router. 0:12 For example, 0:15 giving users visual feedback when they visit a URL that's not available, 0:16 passing data to components through routes, and working with dynamic URL parameters. 0:19 So let's keep going. 0:23 Currently, in the directory app, when you type a URL that doesn't match 0:25 any of the route maps, nothing renders, because the URL does not match any routes. 0:29 Well, a user-friendly app should give immediate feedback when something 0:34 goes wrong. 0:37 Like when a user mistypes a URL or visits a broken link. 0:38 Web developers usually create a 404 error page that displays when the web page 0:41 a user is trying to reach cannot be found on the server. 0:46 Well, React Router lets you create a 404 like error route that 0:49 displays when a URL's path does not match any of the paths defined in your routes. 0:53 So in the components directory, you'll see a file named NotFound.js. 0:58 And the file contains a simple stateless component that renders an error icon and 1:03 text that reads Page Not Found. 1:07 So first, let's import this file in App.js, 1:09 import NotFound from './NotFound'. 1:14 Then in our Routes, add a new Route component below all the Routes. 1:23 And unlike the other Routes, we won't specify a path for this Route. 1:31 We'll just use the component prop to render the not found component. 1:36 And notice how a route without a path will always render. 1:44 So this renders the not found component no matter which URL path is active. 1:48 So to render the not found component only when the URL does not match a path, 1:54 we'll need to use React Router's switch component. 1:59 So let's import switch from react-router-dom at the top of App.js. 2:02 And next let's wrap all our routes inside the switch component. 2:10 So Switch will only render the first Route that matches the URL. 2:22 For example, at the /teachers path, Switch looks for 2:27 a Route component that matches that path. 2:31 And the first one that matches it will render a component. 2:34 Then Switch stops looking for matches. 2:36 And if Switch does not find a matching route, it's going to fall back to this 2:39 sort of catch all route, and render the NotFound component. 2:43 So over in the browser, 2:47 we see that NotFound is no longer rendering in all of our routes. 2:49 And if I type a random path in the URL, you'll immediately see 2:54 the 404 error route displaying the icon and the Page Not Found heading. 2:58 Excellent. 3:03 In the next video, you'll learn how to pass data to components with routes. 3:04