There are multiple solutions available for routing in React. The most popular one, which we are using, is React Router (https://github.com/ReactTraining/react-router). For web applications, React Router provides a package called react-router-dom.

To start using React Router, we have to install it with the following command:

npm install react-router-dom

There are four different components in react-router-dom that are required to implement routing. BrowserRouter is the router for web-based applications. The Route component renders the defined component if the given locations match. The following are two examples of the Route component. The first one renders the Contact component when the user navigates to the /contact end path. You can also use inline rendering with the Route component, as shown in the following example:

<Route path="/contact" component={Contact} />
// Route with inline rendering
<Route path="/links" render={() => <h1>Links</h1>} />

The Switch component wraps multiple Route components. The Link component provides navigation to your application. The following example shows the Contact link and navigates to the /contact endpoint when the link is clicked:

<Link to="/contact">Contact</Link>

The following example shows how to use these components in practice. Let's create a new React app, called routerapp, using create-react-app. Open the app folder with VS Code and open the App.js file to editor view. Import components from the react-router-dom package and remove extra code from the return statement. Following these modifications, your App.js source code should appear as follows:

import React from 'react';
import './App.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Let's first create two simple components that we can use in routing. Create two new files, called Home.js and Contact.js, in the application root folder. Then, add headers to the return statements to show the name of the component. The code of the component is as follows:

// Contact.js
import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>Contact.js</h1>
    </div>
  );
}

export default Contact;

// Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home.js</h1>
    </div>
  );
}

export default Home;

Open the App.js file, and then add a router that allows us to navigate between the components:

import React from 'react';
import './App.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import Contact from './Contact';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <Link to="/">Home</Link>{' '}
          <Link to="/contact">Contact</Link>{' '} 
          <Link to="/links">Links</Link>{' '} 
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={Contact} />
            <Route path="/links" render={() => <h1>Links</h1>} />
            <Route render={() => <h1>Page not found</h1>} />
          </Switch>
        </div>
      </BrowserRouter> 
    </div>
  );
}

export default App;

Now, when you start the app, you will see the links and the Home component, which is shown in the root end path (localhost:3000/) as defined in the first Route component. The exact keyword in the first Route component means that the path must match exactly. If you remove that, then the routing always goes to the Home component:

When you press the Contact link, the Contact component is rendered:

At this point, you have learned how to install and use third-party components with React. These skills will be required in the following chapters when we start to build our frontend.