Become a member
to unlock all features

Level Up!

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


    Redux: Adding React Router to the Project

    Dan AbramovDan Abramov

    We will learn how to add React Router to a Redux project and make it render our root component.



    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




    To add React Router to the project, I'm running npm install --save react-router. I'm going to import the router component from it, as well as the route configuration component. Now I can replace my app with the router, and it's important that it's inside Provider so that any components rendered by the router still have access to the store.

    Inside, I put a single route element that tells React Router that I want to render my app component at the root path. If I run the app, I can see that the router matched the path correctly and rendered the app component.

    If you see weird symbols after a hash sign in the address bar, it means that you're using the version of React Router that doesn't yet default to the browser history, and defaults to hash history instead.

    To fix it, you can import browser history from React Router and pass it as a history prop to Router. Unless you target very old browsers like IE9, you can always use browser history and have a clean URL in the address bar.

    Let's recap the changes we made to add React Router to the application. I ran npm install --save react-router, and I imported the router component and the route configuration component from React Router.

    Instead of rendering the app directly, I replaced it with a router component that has a single route at the root path that renders the app component. In order to avoid hash sign and weird symbols after it, I imported browser history, and I passed it as the history prop to the router component.