We will use the code that we did in the Implementing Airbnb React/JSX Style Guide recipe in Chapter 3, Handling Events, Binding, and Useful React Packages (Repository: Chapter03/Recipe4/airbnb) to enable linter validation.
The first thing we need to do is to install React Router v4, and we can do it with this command:
npm install react-router-dom
You probably are confused about why we are installing react-router-dom instead of react-router. React Router contains all the common components of react-router-dom and react-router-native. That means that if you are using React for the web, you should use react-router-dom, and if you are using React Native, you need to use react-router-native. The react-router-dom package was created originally to contain version 4, and react-router was using version 3. react-router-dom has some improvements over react-router. They are listed here:
- Improved <Link> component (which renders an <a>).
- Includes <BrowserRouter>, which interacts with the browser's window.history.
- Includes <NavLink>, which is a <Link> wrapper that knows whether it's active or not.
- Includes <HashRouter>, which uses the hash in the URL to render the components. If you have one static page, you should use this component instead of <BrowserRouter>.