React Router Nav Links - Highlighting Active Links

App.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom'

import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>React Router Nav Links</h1>
        <Router>
          <div>
            <div className="mt-3">
              <NavLink className='btn' activeClassName='btn-primary' exact to='/'>Page 1</NavLink>
              <NavLink className='btn' activeClassName='btn-primary' exact to='/page2'>Page 2</NavLink>
              <NavLink className='btn' activeClassName='btn-primary' exact to='/page3'>Page 3</NavLink>
            </div>
            <div className="mt-3">
              <Switch>
                <Route path='/'
                    exact
                    render={() => (
                      <h2>Page 1</h2>
                    )}
                  />
                <Route path='/page2'
                    exact
                    render={() => (
                      <h2>Page 2</h2>
                    )}
                  />
                <Route path='/page3'
                    exact
                    render={() => (
                      <h2>Page 3</h2>
                    )}
                  />
              </Switch>
            </div>
          </div>
        </Router>
      </div>
    )
  }
}

export default App