Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    React Router: Redirect

    Joe MaddaloneJoe Maddalone
    0.14 - 16
    react-routerReact Router

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



    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




    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.