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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Currently in the directory app,
0:00
when you type a URL that doesn't
match any of the route paths,
0:02
nothing renders because the URL
does not match any routes.
0:07
Well, a user-friendly app gives immediate
feedback when something goes wrong,
0:11
like when a user mistypes a URL,
or visits a broken link.
0:18
Web developers usually create a 404
error page that displays when
0:22
the web page a user's trying to
reach cannot be found on the server.
0:27
React Router lets you create
a 404-like error route that
0:32
displays when a URL path does not match
any of the paths defined in your routes
0:37
So in the components directory
you'll see a file named NotFound.js.
0:44
And the file contains a simple
stateless component that
0:50
renders an error icon and
a heading that reads Page Not Found.
0:55
So first, let's import this file in App.js.
1:02
So we'll type import NotFound from
1:08
'./components/NotFound';.
1:13
Then in our Route, add a new Route
component below all the routes.
1:18
Since we want this route
to match with any URL,
1:24
we'll pass the path,
the wildcard character.
1:28
This route will match with any URL, but
1:32
will only render when none of
the other routes match the URL.
1:36
We'll pass the element prop,
the NotFound tags.
1:42
Over in the browser,
we now immediately see the 404 error route
1:49
displaying the icon and
the Page Not Found heading, excellent.
1:54
Let's type /courses/random in the URL, and
1:59
you'll see the 404 error route,
as well, great.
2:04
If by any chance you're seeing
the Courses component like so,
2:10
and you're using nested routes like me,
make sure you removed
2:15
the /* from the parent path from
when we had descendant routes.
2:21
Otherwise, this route
becomes the best match
2:26
with the URL since they
both start with /courses.
2:31
Our NotFound route will only
render when none of the others
2:35
are a best match to the URL.
2:40
If you decided to use descendant
routes instead of nested routes,
2:43
you can't remove the /* like
we did with nested routes.
2:49
So we can add another NotFound
route in the Courses.js file.
2:54
At the bottom of the Route tags,
I'll paste a copy of the NotFound
3:02
route we wrote earlier, and
import the NotFound component at the top.
3:07
But this will render the NotFound
component inside the Courses component.
3:14
Instead, we can redirect the user
to any random URL with Navigate.
3:21
I'll remove the NotFound import
statement at the top of the file,
3:29
and replace the NotFound component
with the Navigate component.
3:34
For the NotFound component to render,
3:39
I need to navigate the user to a URL path
that will match with the NotFound path.
3:42
So I'll set the to prop value to "/404".
3:49
I added the / in the front so
that it's an absolute
3:54
path that brings the user to /404.
4:00
If I leave the / out,
this becomes a relative path and
4:05
the user will get navigated
to the courses/404 path.
4:10
Lastly, I'll add the replace
prop to my Navigate component.
4:16
Since I want to replace the URL
path the user tried to navigate to,
4:20
with the 404 path.
4:25
Now if you type /courses/random path,
4:29
I'll get redirected to /404 and
4:33
our NotFound component renders, great.
4:37
For the rest of this course,
I'll go back to using my nested routes.
4:41
In the next video, you will learn how
to pass data to components with routes.
4:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up