react 18 配合 react router v6 后，`withrouter` 和 `history.push()` 已被移除，需改用 `usenavigate` 钩子完成编程式导航，如表单提交后的跳转或重定向。
在 React Router v6（推荐与 React 18 搭配使用）中，所有历史管理逻辑已被重构为函数式 API，useNavigate 是替代旧版 this.props.history.push() 或 withRouter 的标准方式。它返回一个 navigate 函数，支持相对/绝对路径跳转、状态传递及导航类型控制（如 replace: true 实现无痕重定向，避免用户点击浏览器“后退”返回到编辑页）。
以下是一个典型场景的完整示例：用户在编辑文章页提交表单后，成功更新数据并跳转回首页（/），且不留下编辑页的导航记录：
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';
function EditPostPage() {
const { id } = useParams(); // 获取 URL 中的动态参数，如 /edit/123
const navigate = useNavigate();
const [state, setState] = useState({ title: '', content: '' });
const handleSubmit = useCallback((e) => {
e.preventDefault();
axios.put(`/api/posts/${id}`, state)
.then(() => {
// ✅ 编程式重定向：跳转至首页，且替换当前历史记录
navigate('/', { replace: true });
})
.catch(err => {
console.error('更新失败:', err.response?.data || err.message);
});
}, [id, state, navigate]);
return (
<form onSubmit={handleSubmit}>
<input
value={state.title}
onChange={e => setState(prev => ({ ...prev, title: e.target.value }))}
placeholder="标题"
/>
<textarea
value={state.content}
onChange={e => setState(prev => ({ ...prev, content: e.target.value }))}
placeholder="内容"
/>
<button type="submit">保存修改</button>
</form>
);
}
export default EditPostPage;⚠️ 注意事项：
- useNavigate 必须在组件顶层（或自定义 Hook 内部）调用，不可在条件语句或异步回调中直接调用（但可在 .then() 等回调中安全使用其返回的函数）；
- navigate(to, { replace: true }) 适用于“重定向”语义（如登录后跳转、表单成功提交后返回），避免用户误点浏览器后退回到无效中间页；
- 若需携带临时状态（如提示消息），可使用 navigate('/home', { state: { message: '更新成功' } })，目标页面可通过 useLocation().state 读取；
- 确保已正确配置 <Router>（如 BrowserRouter）作为应用根组件的父级，否则 useNavigate 将抛出错误：“useNavigate may be used only in the context of a
component.”
总结：从 React Router v5 升级至 v6 后，useNavigate 成为编程式导航的唯一推荐方式。它更轻量、更符合 React Hooks 设计范式，并通过 replace 选项原生支持重定向语义，是 React 18 应用中处理路由跳转的标准实践。
