Redux: Adding React Router to the Project

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

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

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

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

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

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