React-router-dom NavLink not rendering but goes to path

Question

My problem today is that I am using react-router-dom and have all my paths set in 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

Now when I use NavLink in my NavBar component the URL does change to the paths but does not render the component to the screen.

NavBar component:

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 & Header

NavBar is not a direct child of AppRouter but descends from Landing. However, I did change it to where to NavBar is a direct child of AppRouter, but that did not change the fact that the Landing component is not rendering on initial load of the page.

Answer 1

Just in case anyone else is struggling with this issue. In my case, the app was wrapper with <BrowserRouter> at the top level and once more at a lower level (next to the NavLinks). Removing the second BrowserRouter solved it.

Answer 2

I had the same problem when upgrading react to 17.x and react-router-dom to 5.x. I fixed it by changing the <Router> wrapper by the <BrowserRouter>.

<BrowserRouter>
  <App />
</BrowserRouter>