How to fix “Cannot read property ‘pathname’ of undefined” error with React Router?

To fix "Cannot read property ‘pathname’ of undefined" error with React Router, we need to add the Routes properly.

For instance, we write

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

if we’re using React Router v4.

We add the Router and put our Routes inside it.