React页面切换需手动刷新问题求助

我制作了Navbar组件以及Home.jsx和About.jsx页面，只有在页面刷新后，这两个页面才能跳转到对应路径。试过window.location.reload(false);方法也没用，求解决。

原App.js代码 #

import React from "react";
import Navbar from "./Components/Navbar";
import Home from "./Components/Pages/Home/Home";
import About from "./Components/Pages/About/About";
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";



function App() {



  return (
    <>
      <Navbar />
      <Router>
        <div className="pages">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
      </div>
      </Router>
    </>
  );
}

export default App;

原Navbar.js代码 #

import React, { useState } from 'react';
import './Styles/Navbar.css'
import  {BrowserRouter , NavLink } from 'react-router-dom'


function Navbar() {

  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);


  return (
    <BrowserRouter>
    <div className='nav-container'>
        <div className='nav-wrapper'>
            <div className='nav-logo'>
                <h1>SapphireServers</h1>
                <i class="fa-solid fa-server"></i>
            </div>
            <div className="nav-link-wrapper">
            <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <NavLink
                to="/"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                exact to="/about" relative='path' activeClassName="active" className="nav-links"onClick={handleClick}  >
                About
              </NavLink>
              </li>
              <li className="nav-item">
              <a href="https://dash.sapphireservers.net"  activeClassName="Active" className='nav-links'>Sign-Up</a>
              </li>
          </ul>
          </div>
          <div className="nav-icon" onClick={handleClick}>
            <i className={click ? "fas fa-times" : "fas fa-bars"}></i>
          </div>
        </div>
        </div>
    </BrowserRouter>
  )
}

export default Navbar;

核心问题是重复嵌套了BrowserRouter：你在App.js里已经用了<Router>（BrowserRouter的别名）提供路由上下文，又在Navbar.js里套了一层<BrowserRouter>，导致两层路由状态隔离——点击NavLink时是在内层Router里跳转，外层的Routes完全感知不到，所以页面不会更新；只有刷新时浏览器直接请求路径，外层Router才会匹配到对应页面。

修复步骤 #

1. 删除Navbar.js里的<BrowserRouter>包裹，只保留导航结构
2. 把Navbar移到App.js的<Router>内部（让NavLink直接获取顶层路由上下文，结构更规范）

修改后的代码 #

Navbar.js

import React, { useState } from 'react';
import './Styles/Navbar.css'
import { NavLink } from 'react-router-dom'


function Navbar() {
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);

  return (
    <div className='nav-container'>
      <div className='nav-wrapper'>
        <div className='nav-logo'>
          <h1>SapphireServers</h1>
          <i className="fa-solid fa-server"></i>
        </div>
        <div className="nav-link-wrapper">
          <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <NavLink
                to="/"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                exact to="/about" relative='path' 
                activeClassName="active" className="nav-links" 
                onClick={handleClick}
              >
                About
              </NavLink>
            </li>
            <li className="nav-item">
              <a href="https://dash.sapphireservers.net" className='nav-links'>
                Sign-Up
              </a>
            </li>
          </ul>
        </div>
        <div className="nav-icon" onClick={handleClick}>
          <i className={click ? "fas fa-times" : "fas fa-bars"}></i>
        </div>
      </div>
    </div>
  )
}

export default Navbar;

App.js

import React from "react";
import Navbar from "./Components/Navbar";
import Home from "./Components/Pages/Home/Home";
import About from "./Components/Pages/About/About";
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";


function App() {
  return (
    <Router>
      <Navbar />
      <div className="pages">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Joe Fikis