react-router-dom路由点击不生效：URL变页面不刷新问题求助

数据老陈

2026-7-16

React路由点击Link URL变化但页面不切换的排查方案

1. 统一Router包裹范围

所有用到Link和Route的组件必须在同一个Router（比如BrowserRouter）内部。如果Navbar在Router外面，点击Link只会修改URL，不会触发路由匹配。

正确做法：在index.js里用BrowserRouter包裹整个<App />，确保Navbar也被包含在内。

2. 适配react-router-dom v6+的路由写法

如果使用的是v6及以上版本，必须用<Routes>包裹所有<Route>组件，不能像v5那样直接平铺<Route>：

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

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

旧写法会导致点击Link后组件不更新。

3. 避免重复嵌套Router

不要在多个组件里嵌套Router（比如App.js和Navbar各套一次），多个Router会隔离路由状态，导致点击事件无法触发正确的路由更新。

4. 检查页面组件的导出/导入

确认Home、About等页面组件的导出和导入方式匹配，比如默认导出对应import Home from './Home'，命名导出对应import { Home } from './Home'。导入错误会导致渲染空内容，看起来像没切换页面。

5. 修正依赖配置与版本兼容

不要把react-router-dom放在devDependencies里，它是生产依赖，需要移到package.json的dependencies字段。
确保react和react-router-dom版本兼容：v6版本要求React 16.8+，查看package.json里的版本是否符合要求。