Routing is an important task for the proper functioning of a website or application. If you are using routes in your app you are also using react-router-dom. It is designed for web applications and it is the version of React Router v5. It  is needed to set up your routes. Routing helps us to configure an app that accepts different URLs and mapps it to particular components. When the matching URL is found then the matching page or component will be rendered into HTML DOM. URL is checked with a specified list of routes in our React app. Each of the routes is linked to the <Route> component where the complete configuration is set. It is installed using npm.

$ npm install --save react-router-dom

With a module bundler like webpack use it.

import { BrowserRouter, Route, Link } from "react-router-dom";

// using CommonJS modules

const BrowserRouter = require("react-router-dom").BrowserRouter;

const Route = require("react-router-dom").Route;

const Link = require("react-router-dom").Link;

You will have to use the component property and render or children properties in some situations. Match, location, history are the three methods that will be passed to these three properties. Here is an example for using components.

<Route exact path="/" component={HomePage} />

You should use Browser Router to implement routing.

import { BrowserRouter } from 'react-router-dom'

import { Route } from 'react-router-dom'

Create a base layer layout component using components like link, route.

const BaseLayout = () => (

  <div className="base">

    <header>

      <p>React Router v5 Browser Example</p>

        <nav>

          <ul>

            <li><Link to='/'>Home</Link></li>

            <li><Link to='/about'>About</Link></li>

            <li><Link to='/me'>Profile</Link></li>

            <li><Link to='/login'>Login</Link></li>

            <li><Link to='/register'>Register</Link></li>

            <li><Link to='/contact'>Contact</Link></li>

          </ul>

        </nav>

    </header>

    <div className="container">

      <Route path="/" exact component={HomePage} />

      <Route path="/about" component={AboutPage} />

      <Route path="/contact" component={ContactPage} />

      <Route path="/login" component={LoginPage} />

      <Route path="/register" component="{RegisterPage}" />

      <Route path="/me" component={ProfilePage} />

    </div>

    <footer>

        React Router v5 Browser Example (c) 2017

    </footer>

  </div>

)

Then create pages.

const HomePage = () => <div>This is a Home Page</div>

const LoginPage = () => <div>This is a Login Page</div>

const RegisterPage = () => <div>This is a Register Page</div>

const ProfilePage = () => <div>This is the Profile Page</div>

const AboutPage = () => <div>This is an About Page</div>

const ContactPage = () => <div>This is a Contact Page</div>

Lastly create an App component which BrowserRouter component to hold our base layout component. Now render the app.

const App = () => (

  <BrowserRouter>

    <BaseLayout />

  </BrowserRouter>

)

render(<App />, document.getElementById('root'))