React路由跳转URL变化但页面不更新，需手动刷新才加载

你当前代码使用的是react-router-dom@5.x版本的API（Switch、component形式的Route传参），出现URL变化但页面不更新、必须手动刷新才加载内容的问题，按以下优先级排查修复：

• 版本不兼容/依赖冲突问题（90%以上的同类问题根因）
  很多人安装依赖时误装了v6版本的react-router-dom，v6版本已经完全移除了Switch组件，同时修改了路由上下文逻辑，和你写的v5语法不兼容，会出现各种无报错的异常。另外如果项目中单独安装了和react-router-dom版本不匹配的react-router包，也会导致上下文监听失效。
  执行以下命令重装正确版本依赖：

  # npm用户执行
  rm -rf node_modules package-lock.json
  npm install react-router-dom@5.3.0
  
  # yarn用户执行
  rm -rf node_modules yarn.lock
  yarn add react-router-dom@5.3.0
  

  注意5.3.0是v5分支的最终稳定版，兼容React 18，不要装更低的5.x版本。

• 跳转写法错误
  检查TopNav组件以及其他页面的跳转逻辑：

  1. 不要用原生<a href="/xxx">标签做站内路由跳转，必须使用react-router-dom导出的Link/NavLink组件
  2. JS触发跳转不要直接操作window.history，必须通过useHistory钩子拿到路由实例调用push/replace方法
     正确跳转示例：

  // 组件内声明式跳转
  import { Link, NavLink, useHistory } from 'react-router-dom';
  
  // 导航组件里的链接写法
  <NavLink exact to="/">首页</NavLink>
  <NavLink to="/login">登录</NavLink>
  <NavLink to="/register">注册</NavLink>
  
  // 逻辑里的命令式跳转
  const history = useHistory();
  const afterLogin = () => {
    history.push('/')
  }
  

• Router重复包裹
  检查项目入口文件（一般是src/index.js），如果已经在<App />外层包裹了BrowserRouter，就会导致双层路由上下文冲突，内层路由无法监听history变化。如果入口文件已经包过Router，直接删掉App.js里的<Router></Router>外层标签即可。
  会导致冲突的错误入口示例：

  // src/index.js
  import { BrowserRouter } from 'react-router-dom';
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

  这种情况App.js里只需要保留TopNav、Switch和Route结构即可，不需要再套Router。

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