In this lecture, we're going to learn how to redirect the user to another route.
We've talked about this topic before we can redirect users to different pages with the Router Link Directive
or a set of functions.
But what if we want to redirect users from an existing path?
Let me show you what I mean in the browser.
I'm going to navigate through a path called manage clips.
Let's say during the early stages of our app, we decided to create a path called manage clips.
Some users like to bookmark specific pages to save time from having to navigate to them.
It's a common behavior.
Browsers are capable of remembering the URLs you visit.
It's possible that the previous URL was saved in the browser's history.
For example, if we were to remove the path from the URL and leave the domain, our browser would recommend
some pages.
These are URLs we previously visited.
If we were to begin to type the word manage, we're recommended two paths.
The manage and manage clips paths.
How does the user know which path is correct?
They may end up clicking on the old path.
Upon clicking, it will be showing a blank page.
There are two solutions we can implement to resolve this issue.
We can display a four or four message to let the user know the page no longer exists.
Alternatively, we can redirect the user to the new path.
The second solution works well because we know where the user wants to go.
If you know where the user wants to go, you should redirect them to the correct page.
It's also good for SEO because search engines will learn about your new URL structure faster.
Redirecting the user is easy to pull off with the router back in the editor.
Open the video routing module.
We will add a new route to the Routes array.
The path, for the record, will be the following manage clips.
Let's assume the Manage Clips Path was the original path to the page for managing uploads.
After some discussion, we may want to change the path to manage.
This time we're not going to render rate components.
Instead, we're going to redirect the user to a different path.
We'll add a property called redirect to.
This property will allow us to redirect the user to a different path.
If a user visits this path, they will be redirected to the path set in the property.
This is a great way to redirect users to brand new new URLs without displaying a 404 page.
Let's set this property to the following value manage.
We can omit the component property from this route if we have the redirect to property.
It's not necessary to add the component property and either doesn't need to know what component to render.
Let's test if the redirect works.
Save your changes and switch back to the browser.
Inside the address bar changed the path to slash manage clips.
We've been redirected to the new path for the Manage page redirection is easy with angular routing library
by adding a redirect.
We won't have to worry about users landing on an old page if they accidentally visit the old path.
They'll be redirected to the new path.
This step is optional, but I find it to be a great way to improve user experience.