react-router-dom路由跳转如何避免整页/Navbar重载仅刷新内部组件

整页刷新的核心原因是导航栏用了原生<a>标签实现跳转：原生a标签点击会触发浏览器默认的全页加载行为，完全绕过react-router-dom的客户端路由机制，自然会出现包括Navbar在内的整页重载。
你的App.js路由结构本身没有问题：Navbar放在<Router>内部、<Routes>外部的位置，本来就会在路由切换时保持常驻，不会随路由匹配结果变化重新渲染。

1. 调整Navbar.js代码 #

首先从react-router-dom导入专用的Link导航组件，把所有原生<a>标签替换为<Link>，将原有的href属性替换为to属性，同时修正原有代码里不规范的HTML结构（空链接、链接未放在li标签内的问题）：

// 导入Link导航组件
import { Link } from "react-router-dom";

const Navbar = () => {
    return(
        <nav>
            <ul>
                <li>
                    {/* 替换a标签为Link，href属性改为to */}
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to="/todolist">ToDoList!</Link>
                </li>
                <li>
                    <Link to="/jobs">Jobs</Link>
                </li>
            </ul>
        </nav>
    )
}
export default Navbar

Link组件会内部拦截点击事件，通过HTML5 History API更新路由地址，不会触发浏览器的默认整页加载行为。

2. 优化App.js代码 #

你的App.js路由逻辑完全符合预期，只需要删掉没用到的useState导入即可，其余代码无需改动：

// 移除未使用的useState导入
import Navbar from './Navbar'
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"; 
import Home from './Home';
import ToDoList from './ToDoList';
import Jobs from './Jobs';

const App = () => {
  return(
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path= '/todolist' element={<ToDoList />}/>
          <Route path= '/jobs' element={<Jobs/>}/>
        </Routes>
      </Router>
    </>
  )
}
export default App

修改完成后点击导航项，只会更新<Routes>标签内匹配当前路径的组件，Navbar会全程保持常驻状态，不会出现整页刷新。如果后续需要在业务逻辑里触发跳转（比如表单提交后跳页），不要用window.location.href这类原生方法，使用react-router-dom提供的useNavigate钩子即可，同样可以实现无刷新跳转。

内容的提问来源于stack exchange，提问作者Mustafa Younus