ReactJs Router changes url but not the page

Question

I am building a portfolio website and am using react BrowserRouter, Link and Switch to manage my websites routing My problem is that when I click on the 'Projects' link it changes on url but not in view, however when I refresh the page it works.

here is what my routing currently looks like in my App.js.

import React, { Component } from 'react';

import NavBar from './Components/NavBar/NavBar'
import Home from './Components/Home/Home';
import Projects from './Components/Projects/Projects';

import { BrowserRouter ,Switch, Route, } from 'react-router-dom';

class App extends Component {
  
  render() {
    return (
      <div className="App">
        <NavBar />
        <BrowserRouter>
          <Switch>
            <Route path="/" component={Home} exact={true} />
            <Route path="/projects" component={Projects} /> 
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

and this is what my Navbar.js looks like..

import React, {useState} from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
import { Link } from 'react-scroll';

function NavBar() {
  const [navbar,setNavbar] = useState(false)

  const changeBackground = () => {
    if(window.scrollY >= 100) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

  window.addEventListener('scroll', changeBackground)

  return(
    <BrowserRouter>
      <ul className="nav bg-white sticky-top nav-tabs nav-justified">
        <li className="nav-item">
          <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary home"}
            to="home"
            href="/"
            smooth={true}
            offset={50}
            duration={500}>
            Home
          </Link>
        </li>

        <li className="nav-item">
        <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary about"}
            to="about"
            smooth={true}
            offset={50}
            duration={500}>
            About
          </Link>
        </li>

        <li className="nav-item">
          <NavLink to="/projects">Projects</NavLink> //This is the link that won't work. 
        </li>

        <li className="nav-item">
         <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary contact"}
            to="contact"
            smooth={true}
            offset={50}
            duration={500}>
            Contact
          </Link>
        </li>
      </ul>
    </BrowserRouter>
      
  
  )
}

export default NavBar

Any help would be great!

Answer 1

The problem is that you're defining two different BrowserRouter. All your routing logic should be under one BrowserRouter:

App should be like this:

class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <NavBar />
          <Switch>
            <Route path="/" component={Home} exact={true} />
            <Route path="/projects" component={Projects} /> 
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

and NavBar should not have the wrapping BrowserRouter