Javascript ReactJs路由器更改url，但不更改页面

我正在建立一个投资组合网站，并使用react BrowserRouter、Link和Switch来管理我的网站路由。我的问题是，当我单击“项目”链接时，它会在url上更改，但不会在视图中更改，但是当我刷新页面时，它会工作

下面是我的路由当前在我的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;

import React，{Component}来自'React'；
从“./Components/NavBar/NavBar”导入导航栏
从“./Components/Home/Home”导入Home；
从“./组件/项目/项目”导入项目；
从“react router dom”导入{BrowserRouter，Switch，Route，}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这就是我的Navbar.js的样子

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

import React，{useState}来自“React”；
从“react router dom”导入{NavLink，BrowserRouter}
从“react scroll”导入{Link}；
函数NavBar（）{
常量[navbar，setNavbar]=useState（false）
常量changeBackground=（）=>{
如果（window.scrollY>=100）{
设置导航栏（真）
}否则{
设置导航栏（错误）
}
}
window.addEventListener（'scroll'，changeBackground）
返回(


家


关于


项目//这是一个不起作用的链接。


接触


)
}
导出默认导航栏

---

任何帮助都会很好

问题是您正在定义两个不同的BrowserRouter。所有路由逻辑都应在一个BrowserRouter下：

应用程序应如下所示：

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>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
);
}
}

---

导航栏不应该有包装浏览器路由器

这两个组件都没有改变还是只是侧栏？这就解决了它！谢谢