React 18中如何实现路由跳转？原withRouter方案已失效

在React 18搭配React Router v6+的环境中，withRouter HOC和props.history.push()确实已被移除，替代方案是使用**useNavigate钩子**来实现路由跳转。以下是完整的修复步骤：

步骤1：导入useNavigate钩子 #

从react-router-dom中导入所需钩子：

import { useNavigate, useParams } from 'react-router-dom';

步骤2：初始化导航函数 #

在组件内部声明navigate变量：

const { id } = useParams();
const navigate = useNavigate(); // 初始化路由导航函数

步骤3：完成请求后执行跳转 #

修改handleSubmit函数，在Axios请求成功的回调中调用navigate实现首页跳转：

const handleSubmit = useCallback((e) => {
  e.preventDefault();
  Axios.put("/api/posts/" + id, state)
    .then(() => {
      navigate('/'); // 跳转到首页路径
    })
    .catch(err => console.log(err))
}, [id, state, navigate]) // 将navigate加入依赖数组

补充说明 #

• useNavigate是React Router v6为函数组件设计的专属导航钩子，支持多种导航场景：
  • 跳转到指定路径：navigate('/target-path')
  • 后退一页：navigate(-1)
  • 前进一页：navigate(1)
• 把navigate加入useCallback的依赖数组，能避免ESLint的依赖缺失警告，且useNavigate返回的函数引用本身是稳定的，不会引发不必要的重渲染。

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