1
00:00:00,150 --> 00:00:04,890
In this lecture, we're going to learn how to redirect the user to another route.

2
00:00:05,160 --> 00:00:12,210
We've talked about this topic before we can redirect users to different pages with the Router Link Directive

3
00:00:12,210 --> 00:00:13,650
or a set of functions.

4
00:00:13,920 --> 00:00:17,520
But what if we want to redirect users from an existing path?

5
00:00:17,830 --> 00:00:20,430
Let me show you what I mean in the browser.

6
00:00:20,610 --> 00:00:24,120
I'm going to navigate through a path called manage clips.

7
00:00:26,620 --> 00:00:32,650
Let's say during the early stages of our app, we decided to create a path called manage clips.

8
00:00:32,980 --> 00:00:38,410
Some users like to bookmark specific pages to save time from having to navigate to them.

9
00:00:38,830 --> 00:00:40,240
It's a common behavior.

10
00:00:40,510 --> 00:00:44,050
Browsers are capable of remembering the URLs you visit.

11
00:00:44,380 --> 00:00:48,970
It's possible that the previous URL was saved in the browser's history.

12
00:00:49,450 --> 00:00:56,350
For example, if we were to remove the path from the URL and leave the domain, our browser would recommend

13
00:00:56,350 --> 00:00:57,340
some pages.

14
00:00:57,640 --> 00:01:00,350
These are URLs we previously visited.

15
00:01:00,670 --> 00:01:05,310
If we were to begin to type the word manage, we're recommended two paths.

16
00:01:05,560 --> 00:01:08,650
The manage and manage clips paths.

17
00:01:09,250 --> 00:01:11,710
How does the user know which path is correct?

18
00:01:11,950 --> 00:01:14,410
They may end up clicking on the old path.

19
00:01:14,650 --> 00:01:17,560
Upon clicking, it will be showing a blank page.

20
00:01:17,860 --> 00:01:21,670
There are two solutions we can implement to resolve this issue.

21
00:01:22,210 --> 00:01:27,520
We can display a four or four message to let the user know the page no longer exists.

22
00:01:27,940 --> 00:01:31,930
Alternatively, we can redirect the user to the new path.

23
00:01:32,260 --> 00:01:36,820
The second solution works well because we know where the user wants to go.

24
00:01:37,150 --> 00:01:42,220
If you know where the user wants to go, you should redirect them to the correct page.

25
00:01:42,530 --> 00:01:49,000
It's also good for SEO because search engines will learn about your new URL structure faster.

26
00:01:49,630 --> 00:01:54,730
Redirecting the user is easy to pull off with the router back in the editor.

27
00:01:54,850 --> 00:01:56,980
Open the video routing module.

28
00:01:59,500 --> 00:02:02,270
We will add a new route to the Routes array.

29
00:02:02,590 --> 00:02:06,430
The path, for the record, will be the following manage clips.

30
00:02:08,960 --> 00:02:14,840
Let's assume the Manage Clips Path was the original path to the page for managing uploads.

31
00:02:15,200 --> 00:02:19,400
After some discussion, we may want to change the path to manage.

32
00:02:19,790 --> 00:02:22,520
This time we're not going to render rate components.

33
00:02:22,790 --> 00:02:26,630
Instead, we're going to redirect the user to a different path.

34
00:02:26,960 --> 00:02:29,720
We'll add a property called redirect to.

35
00:02:32,420 --> 00:02:36,530
This property will allow us to redirect the user to a different path.

36
00:02:36,950 --> 00:02:42,650
If a user visits this path, they will be redirected to the path set in the property.

37
00:02:43,040 --> 00:02:49,640
This is a great way to redirect users to brand new new URLs without displaying a 404 page.

38
00:02:49,970 --> 00:02:53,720
Let's set this property to the following value manage.

39
00:02:56,260 --> 00:03:02,230
We can omit the component property from this route if we have the redirect to property.

40
00:03:02,470 --> 00:03:08,800
It's not necessary to add the component property and either doesn't need to know what component to render.

41
00:03:09,070 --> 00:03:11,290
Let's test if the redirect works.

42
00:03:11,590 --> 00:03:14,410
Save your changes and switch back to the browser.

43
00:03:17,050 --> 00:03:22,300
Inside the address bar changed the path to slash manage clips.

44
00:03:24,780 --> 00:03:32,040
We've been redirected to the new path for the Manage page redirection is easy with angular routing library

45
00:03:32,280 --> 00:03:33,570
by adding a redirect.

46
00:03:33,660 --> 00:03:39,720
We won't have to worry about users landing on an old page if they accidentally visit the old path.

47
00:03:40,110 --> 00:03:42,360
They'll be redirected to the new path.

48
00:03:42,720 --> 00:03:48,390
This step is optional, but I find it to be a great way to improve user experience.