1
00:00:00,000 --> 00:00:02,534
Currently in the directory app,

2
00:00:02,534 --> 00:00:07,239
when you type a URL that doesn't
match any of the route paths,

3
00:00:07,239 --> 00:00:11,780
nothing renders because the URL
does not match any routes.

4
00:00:11,780 --> 00:00:18,028
Well, a user-friendly app gives immediate
feedback when something goes wrong,

5
00:00:18,028 --> 00:00:22,324
like when a user mistypes a URL,
or visits a broken link.

6
00:00:22,324 --> 00:00:27,602
Web developers usually create a 404
error page that displays when

7
00:00:27,602 --> 00:00:32,789
the web page a user's trying to
reach cannot be found on the server.

8
00:00:32,789 --> 00:00:37,941
React Router lets you create
a 404-like error route that

9
00:00:37,941 --> 00:00:44,522
displays when a URL path does not match
any of the paths defined in your routes

10
00:00:44,522 --> 00:00:50,916
So in the components directory
you'll see a file named NotFound.js.

11
00:00:50,916 --> 00:00:55,650
And the file contains a simple
stateless component that

12
00:00:55,650 --> 00:01:00,898
renders an error icon and
a heading that reads Page Not Found.

13
00:01:02,721 --> 00:01:07,343
So first, let's import this file in App.js.

14
00:01:08,884 --> 00:01:13,312
So we'll type import NotFound from

15
00:01:13,312 --> 00:01:18,042
'./components/NotFound';.

16
00:01:18,042 --> 00:01:24,042
Then in our Route, add a new Route
component below all the routes.

17
00:01:24,042 --> 00:01:28,020
Since we want this route
to match with any URL,

18
00:01:28,020 --> 00:01:32,210
we'll pass the path,
the wildcard character.

19
00:01:32,210 --> 00:01:36,335
This route will match with any URL, but

20
00:01:36,335 --> 00:01:42,715
will only render when none of
the other routes match the URL.

21
00:01:42,715 --> 00:01:46,918
We'll pass the element prop,
the NotFound tags.

22
00:01:49,064 --> 00:01:54,464
Over in the browser,
we now immediately see the 404 error route

23
00:01:54,464 --> 00:01:59,780
displaying the icon and
the Page Not Found heading, excellent.

24
00:01:59,780 --> 00:02:04,770
Let's type /courses/random in the URL, and

25
00:02:04,770 --> 00:02:10,519
you'll see the 404 error route,
as well, great.

26
00:02:10,519 --> 00:02:15,966
If by any chance you're seeing
the Courses component like so,

27
00:02:15,966 --> 00:02:21,310
and you're using nested routes like me,
make sure you removed

28
00:02:21,310 --> 00:02:26,997
the /* from the parent path from
when we had descendant routes.

29
00:02:26,997 --> 00:02:31,099
Otherwise, this route
becomes the best match

30
00:02:31,099 --> 00:02:35,629
with the URL since they
both start with /courses.

31
00:02:35,629 --> 00:02:40,309
Our NotFound route will only
render when none of the others

32
00:02:40,309 --> 00:02:42,515
are a best match to the URL.

33
00:02:43,979 --> 00:02:49,541
If you decided to use descendant
routes instead of nested routes,

34
00:02:49,541 --> 00:02:54,423
you can't remove the /* like
we did with nested routes.

35
00:02:54,423 --> 00:03:00,771
So we can add another NotFound
route in the Courses.js file.

36
00:03:02,476 --> 00:03:07,564
At the bottom of the Route tags,
I'll paste a copy of the NotFound

37
00:03:07,564 --> 00:03:13,128
route we wrote earlier, and
import the NotFound component at the top.

38
00:03:14,739 --> 00:03:20,439
But this will render the NotFound
component inside the Courses component.

39
00:03:21,820 --> 00:03:27,440
Instead, we can redirect the user
to any random URL with Navigate.

40
00:03:29,190 --> 00:03:34,247
I'll remove the NotFound import
statement at the top of the file,

41
00:03:34,247 --> 00:03:39,316
and replace the NotFound component
with the Navigate component.

42
00:03:39,316 --> 00:03:42,312
For the NotFound component to render,

43
00:03:42,312 --> 00:03:48,314
I need to navigate the user to a URL path
that will match with the NotFound path.

44
00:03:49,594 --> 00:03:54,720
So I'll set the to prop value to "/404".

45
00:03:54,720 --> 00:04:00,500
I added the / in the front so
that it's an absolute

46
00:04:00,500 --> 00:04:05,054
path that brings the user to /404.

47
00:04:05,054 --> 00:04:10,486
If I leave the / out,
this becomes a relative path and

48
00:04:10,486 --> 00:04:16,424
the user will get navigated
to the courses/404 path.

49
00:04:16,424 --> 00:04:20,947
Lastly, I'll add the replace
prop to my Navigate component.

50
00:04:20,947 --> 00:04:25,925
Since I want to replace the URL
path the user tried to navigate to,

51
00:04:25,925 --> 00:04:27,656
with the 404 path.

52
00:04:29,149 --> 00:04:33,385
Now if you type /courses/random path,

53
00:04:33,385 --> 00:04:37,137
I'll get redirected to /404 and

54
00:04:37,137 --> 00:04:41,502
our NotFound component renders, great.

55
00:04:41,502 --> 00:04:45,691
For the rest of this course,
I'll go back to using my nested routes.

56
00:04:45,691 --> 00:04:51,746
In the next video, you will learn how
to pass data to components with routes.