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