React使用useNavigate跳转URL变化但页面未更新如何解决

地址栏URL更新但页面未切换，核心原因是路由上下文未正确生效，Routes组件无法监听URL变化触发重渲染，最常见的触发场景是应用根组件未被Router容器包裹，其次是文件命名大小写不一致、依赖版本不兼容。

• 第一步：包裹路由上下文
  打开项目入口文件（通常为src/index.js），将根组件App用BrowserRouter（或HashRouter，根据部署需求选择）完整包裹，确保所有路由相关组件都在Router的子树内，参考代码：

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

  注意：不要把Router写在App.js组件内部，必须包裹在App外层，否则Routes无法获取路由上下文。

• 第二步：统一文件命名大小写
  你当前代码存在命名大小写混乱的问题：根组件为App、首页路由组件为Apps，请确保文件名和import语句的大小写完全一致：

  • 路由配置文件命名为App.js，对应导出组件App
  • 表单首页组件命名为Apps.js，对应导出组件Apps
  • 列表页组件命名为Lists.js，对应导出组件Lists
    避免本地Windows/macOS环境（默认文件路径大小写不敏感）运行正常，部署到Linux服务器后出现组件加载失败的问题。

• 第三步：校验依赖版本
  你使用的Routes、useNavigate都是react-router-dom v6版本的语法，执行以下命令检查本地安装版本：

  npm ls react-router-dom
  

  如果返回版本号低于6.0.0，执行以下命令重装正确版本：

  npm uninstall react-router-dom
  npm install react-router-dom@6
  

所有修改完成后重启本地开发服务，清除浏览器缓存后再测试，点击跳转按钮即可正常切换到Lists页面。

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