This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    React Router: Redirect

    Joe MaddaloneJoe Maddalone

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss