React Router: Redirect

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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

[00:00] 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.

[00:17] 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.

[00:26] 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.

[00:41] 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.

[01:03] 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.

~ 6 years ago

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