[MUSIC]

In the previous stages, you learned the most important parts about React Router.

All your routes are in place and

users can seamlessly navigate through the directory app.

But there's still more to explore in React Router.

For example,

giving users visual feedback when they visit a URL that's not available,

passing data to components through routes, and working with dynamic URL parameters.

So let's keep going.

Currently, in the directory app, when you type a URL that doesn't match

any of the route maps, nothing renders, because the URL does not match any routes.

Well, a user-friendly app should give immediate feedback when something

goes wrong.

Like when a user mistypes a URL or visits a broken link.

Web developers usually create a 404 error page that displays when the web page

a user is trying to reach cannot be found on the server.

Well, React Router lets you create a 404 like error route that

displays when a URL's path does not match any of the paths defined in your routes.

So in the components directory, you'll see a file named NotFound.js.

And the file contains a simple stateless component that renders an error icon and

text that reads Page Not Found.

So first, let's import this file in App.js,

import NotFound from './NotFound'.

Then in our Routes, add a new Route component below all the Routes.

And unlike the other Routes, we won't specify a path for this Route.

We'll just use the component prop to render the not found component.

And notice how a route without a path will always render.

So this renders the not found component no matter which URL path is active.

So to render the not found component only when the URL does not match a path,

we'll need to use React Router's switch component.

So let's import switch from react-router-dom at the top of App.js.

And next let's wrap all our routes inside the switch component.

So Switch will only render the first Route that matches the URL.

For example, at the /teachers path, Switch looks for

a Route component that matches that path.

And the first one that matches it will render a component.

Then Switch stops looking for matches.

And if Switch does not find a matching route, it's going to fall back to this

sort of catch all route, and render the NotFound component.

So over in the browser,

we see that NotFound is no longer rendering in all of our routes.

And if I type a random path in the URL, you'll immediately see

the 404 error route displaying the icon and the Page Not Found heading.

Excellent.

In the next video, you'll learn how to pass data to components with routes.