在 react router v6（适配 react 18）中，`withrouter` 和 `history.push()` 已被移除，推荐使用 `usenavigate` hook 进行编程式导航，支持跳转、重定向及替换历史记录等操作。
在 React 18 项目中集成 React Router v6 后，路由控制方式发生了根本性变化：旧版的 this.props.history.push() 或 withRouter HOC 不再可用，取而代之的是函数式、更轻量且更符合 React Hooks 设计理念的 useNavigate Hook。
✅ 正确用法：useNavigate
首先确保已安装并配置 react-router-dom@6+：
npm install react-router-dom
然后在组件中导入并调用 useNavigate：
import { useNavigate, useParams } from 'react-router-dom';
function EditPostPage() {
const { id } = useParams(); // 获取 URL 中的动态参数（如 /posts/:id）
const navigate = useNavigate(); // 获取导航函数
const handleSubmit = useCallback((e) => {
e.preventDefault();
Axios.put(`/api/posts/${id}`, state)
.then(() => {
// 编程式跳转至首页（/），并替换当前历史记录（避免用户点击返回回到编辑页）
navigate('/', { replace: true });
})
.catch(err => console.error('更新失败:', err));
}, [id, state, navigate]);
return (
);
}
export default EditPostPage;? 关键说明
- navigate(to, options) 第一个参数可为字符串路径（如 '/'、'/posts'）或相对路径对象（如 { pathname: '/posts', search: '?sort=date' }）；
- { replace: true } 表示替换当前 history 记录，常用于表单提交后的“重定向”场景，防止用户刷新或回退时重复提交；
- navigate(-1) 可实现后退，navigate(1) 前进（类似浏览器原生行为）；
- useNavigate 必须在组件顶层或自定义 Hook 内调用（遵循 Hook 规则），不可在条件语句或异步回调中直接定义 const navigate = useNavigate()（但可在回调中调用 navigate）。
⚠️ 注意事项
- 若在非路由组件（如普通工具函数、Axios 拦截器）中需要跳转，请通过状态提升、Context 或事件总线将 navigate 传入，不可在非 React 组件作用域内调用 useNavigate；
- 确保组件被
（如 BrowserRouter）包裹，否则 useNavigate 将抛出 useNavigate may be used only in the context of a component 错误； - 避免在 useCallback 依赖数组中遗漏 navigate —— 虽然它稳定不变，但显式列出可提升代码可维护性与 ESLint 兼容性。
掌握 useNavigate 是 React 18 + Router v6 开发中的基础能力，它让路由控制更安全、更可预测，也更契合现代 React 的函数式与声明式开发范式。
