React18路由跳转常用方法解析

React 18 与 React Router v6 的组合彻底重构了路由导航方式，废弃了旧版的 `withRouter` 和 `history.push()`，转而统一通过函数式 Hook `useNavigate` 实现编程式跳转——它不仅支持常规页面跳转、相对路径导航和带搜索参数的复杂路由，还能通过 `{ replace: true }` 精准控制浏览器历史栈，避免用户误点“返回”导致重复进入编辑页等体验问题；同时强调严格遵守 Hook 规则、注意 SSR 安全性及与滚动行为的协同，是现代 React 应用中实现可靠、可维护导航逻辑的关键所在。

React 18 配合 React Router v6 后，`withRouter` 和 `history.push()` 已被移除，应改用 `useNavigate` Hook 实现编程式导航，包括表单提交后的页面重定向。

在 React Router v6 中，路由控制逻辑全面函数式化，所有历史操作（如跳转、重定向、后退）均通过 useNavigate Hook 获取的 navigate 函数完成。该函数替代了 v5 中的 this.props.history.push 或 history.replace，且默认执行 PUSH 导航（即新增浏览器历史记录），若需模拟传统“重定向”（不保留当前页返回入口），应显式传入 { replace: true } 选项。

以下是一个典型场景：编辑文章后返回首页（/），并避免用户点击浏览器“返回”按钮重新进入编辑页：

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

function EditPostPage() {
  const { id } = useParams(); // 获取 URL 中的动态参数，如 /posts/:id
  const navigate = useNavigate();
  const [state, setState] = useState({ title: '', content: '' });

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    axios
      .put(`/api/posts/${id}`, state)
      .then(() => {
        // 编辑成功后重定向至首页，使用 replace 避免历史栈残留
        navigate('/', { replace: true });
      })
      .catch((err) => {
        console.error('更新失败:', err.response?.data || err.message);
      });
  }, [id, state, navigate]);

  return (
    <form onSubmit={handleSubmit}>
      &lt;input
        value={state.title}
        onChange={(e) =&gt; setState(prev => ({ ...prev, title: e.target.value }))}
        placeholder="标题"
      />
      &lt;textarea
        value={state.content}
        onChange={(e) =&gt; setState(prev => ({ ...prev, content: e.target.value }))}
        placeholder="内容"
      />
      <button type="submit">保存修改</button>
    </form>
  );
}

export default EditPostPage;

⚠️ 注意事项：

• useNavigate 必须在组件顶层（或自定义 Hook 内部）调用，不可放在条件语句或异步回调中（遵守 Hook 规则）；
• navigate 函数支持多种目标格式：字符串路径（如 '/'）、相对路径（如 '..'）、带搜索参数的对象（如 { pathname: '/posts', search: '?page=2' }）；
• 若需跳转后触发滚动到顶，可配合 useEffect + window.scrollTo(0, 0)，或使用 （需启用 future.v7_startTransition 等实验特性）；
• 在服务端渲染（SSR）环境中，请确保 navigate 仅在客户端执行（例如包裹 if (typeof window !== 'undefined') 判断，或依赖 React Router 的内置 hydration 安全机制）。

总结：从 React Router v5 升级至 v6 后，路由操作全面转向 Hooks 驱动。掌握 useNavigate 是 React 18 应用中实现可靠导航与重定向的核心能力，建议同步查阅官方 Upgrading from v5 文档，以平滑迁移其他 API（如 Switch → Routes、Route 的 component/render → element 等）。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。