This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: Redirect

1:25 React lesson by

The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.

Avatar
Livio

Why can't <Links /> go in App after the router in a div?

The redirect component in React Router does exactly what it sounds like it does. It allows us to redirect from one route to another. We've got our simple, three-route, single-page application here. Some link is going to each of those.

We've got each of those with its own route. On the right here, if we go to About, run the About page, Contact, and back to Home.

Let's say, for whatever reason, we're going to call this the About Us page. We're going to update all these routes to about-us. We'll do that there as well. We're still outputting the same component.

Let's also update this link right there. Now we've got our Home, About Us, and Contact. But let's just say that we have a Legacy link, whether it's in our application or coming from another website, we still got this About link. If we load this up and try to go to it, it's not going to work.

What we're going to do is use a redirect component. Redirect. We just say from About to about-us. Save that, and we can go to our Home, or About Us, or Contact. When we go to this Legacy link, it redirects us to the About Us page.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?