React-router-dom NavLink не отображает, но переходит по пути

Моя проблема сегодня в том, что я использую response-router-dom и все мои пути установлены в AppRouter.js:

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import { Landing } from '../components/Landing';
import About from '../components/About';
import { Resume } from '../components/Resume';
import { Phone } from '../components/Phone';
import { Github } from '../components/Github';


export class AppRouter extends Component {
   render() {
    return (
      <BrowserRouter>
        <div>          
              <Switch>
                  <Route exact path='/' Component={Landing}/>
                  <Route path='/about' Component={About} />
                  <Route path='/resume' Component={Resume} />
                  <Route path='/phone' Component={Phone} />
                  <Route path='/github' Component={Github} />
              </Switch>

        </div>
      </BrowserRouter>
    )
  }
}

export default AppRouter

Теперь, когда я использую NavLink в своем компоненте NavBar, URL-адрес изменяется на пути, но не отображает компонент на экране.

Компонент NavBar:

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';

export class Navbar extends Component {
  render() {
    return (
      <div>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <a className="navbar-brand" href="#">"IMAGE PLACE HOLDER" 
   </a>
                <button className="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarNavDropdown" aria- 
controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle 
navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" 
id="navbarNavDropdown">
                    <ul className="navbar-nav">
                    <li className="nav-item active">
                        <NavLink className='nav-link' to='/'>Home</NavLink>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Resume</a>
                    </li>
                    <li className="nav-item">
                        <NavLink className='nav-link' 
to='/about'>About</NavLink>
                    </li>
                    <li className="nav-item dropdown">
                        <a className="nav-link dropdown-toggle" href="#" 
id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                        Contact
                        </a>
                        <div className="dropdown-menu" aria- 
labelledby="navbarDropdownMenuLink">
                        <a className="dropdown-item" href="#">Phone</a>
                        <a className="dropdown-item" href="#">Email</a>
                        <a className="dropdown-item" href="#">Github</a>
                        </div>
                    </li>
                    </ul>
                </div>
            </nav>
      </div>
    )
  }
}

export default Navbar

AppRouter -> Landing -> NavBar и заголовок

NavBar не является прямым потомком AppRouter, но является потомком Landing. Однако я изменил его так, чтобы NavBar был прямым потомком AppRouter, но это не изменило того факта, что компонент Landing не отображается при начальной загрузке страницы.