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.