如何在函数中使用react-router-dom实现新页面路由跳转？

架构老林

2026-10-6

函数内触发react-router-dom路由跳转实现方案

版本适配说明

react-router-dom v5 版本使用useHistory钩子实现编程式导航
react-router-dom v6 版本移除了useHistory，改用useNavigate钩子替代

具体实现逻辑

1. v5版本（与你现有代码匹配）

你补充的Register组件中已经使用了正确的写法：在组件顶层调用useHistory获取history实例后，在任意函数/副作用中调用history.push(目标路由)即可触发跳转。
对应你初始提问的示例函数改造如下：

// 先从react-router-dom引入钩子
import { useHistory } from "react-router-dom";

function YourComponent() {
  // 组件顶层调用钩子获取实例
  const history = useHistory();

  function functionName(success){
    if (success){
      // 此处直接调用push方法跳转
      history.push("/login");
    }
  }

  // 剩余组件逻辑...
}

你现有Register组件中通过`useEffect`监听`data.success`变化后跳转的写法完全符合v5版本的使用规范，无需调整。

2. v6版本（若后续升级框架可参考）

v6版本的用法和v5基本一致，仅钩子替换为useNavigate：

import { useNavigate } from "react-router-dom";

function YourComponent() {
  const navigate = useNavigate();

  function functionName(success){
    if (success){
      // 直接传入目标路由即可跳转
      navigate("/login");
      // 若需要替换当前历史记录（禁止用户点后退返回当前页），可加配置项
      // navigate("/login", { replace: true })
    }
  }

  // 剩余组件逻辑...
}