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 --save

There are four different components in react-router-dom that are needed 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 user navigates to the /contact end path. You can also use inline rendering with the Route component, as shown in the second 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 render method. After the modifications, your App.js source code should look like the following:

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

class App extends Component {
  render() {
    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, to the application root folder. Add just headers to the render() methods to show the name of the component. See the code of the components as follows:

//Contact.js
import React, { Component } from 'react';

class Contact extends Component {
  render() {
    return (
      <div>
        <h1>Contact.js</h1>
      </div>
    );
  }
}

export default Contact;

// Home.js
import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div>
        <h1>Home.js</h1>
      </div>
    );
  }
}

export default Links;

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

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

class App extends Component {
  render() {
    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:3030/) 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: