react-router-dom v6中useNavigate跳转URL更新但页面未渲染

一共两个核心问题导致跳转后URL更新但页面不渲染：

• AddPage组件导出时序错误：AddPage.js第一行就执行export default AddPage;，此时AddPage组件还未被声明，属于变量提升导致的引用错误，最终App.js中导入的AddPage是undefined，即使路由匹配成功也无法渲染出正常内容。
• 自定义Router配置未同步路由状态：React Router v6中，直接引入底层Router组件手动传入自定义history实例时，没有订阅history的路由变化事件来触发组件重渲染，导致URL更新后，Router内部保存的location状态没有同步更新，不会重新执行路由匹配逻辑。另外v6版本默认路由就是精确匹配，不需要额外加exact属性。

• 修复AddPage.js的导出错误
  删除文件第一行多余的export default AddPage;语句，只保留文件末尾的导出即可，修复后文件开头结构如下：

  import React, { useState } from 'react';
  import Header from '../components/Header';
  import { makeStyles } from '@material-ui/core/styles';
  import { TextField, Button, InputAdornment } from '@material-ui/core';
  
  const AddPage = () => {
      const [moveData, setMoveData] = useState({ movementName:'', movementWeight: '' });
      const handleSubmit = (e) => {
          e.preventDefault();
      };
  
      // 其余组件原有逻辑保持不变
  };
  
  export default AddPage;
  

• 修复路由配置（推荐使用官方封装的路由组件，无需手动维护history）
  不需要单独创建history.js文件，直接使用React Router v6内置的HashRouter（对应你之前用的createHashHistory模式），修改App.js代码如下：

  import React from 'react';
  // 直接引入内置的HashRouter，替换原有的底层Router
  import { HashRouter as Router, Routes, Route } from 'react-router-dom';
  import AddPage from './AddPage';
  import HomePage from './HomePage';
  
  class App extends React.Component {
      render() {
        return (
          <Router>
            <Routes>
              <Route path="/add" element={<AddPage title="One Rep - Add" />} />
              <Route path="/" element={<HomePage title="One Rep - Home" />} />
            </Routes>
          </Router>
        )
      }
  };
  
  export default App;
  

  修复后useNavigate触发的跳转就会正常同步路由状态，匹配到对应路由后渲染目标页面。

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