Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
[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
You need to sign up for Treehouse in order to download course files.
Sign up