当前位置：首页 > React

react中action中如何写跳转

2026-01-26 05:53:53React

在 React 中实现跳转的方法

使用 react-router-dom 的 useNavigate Hook
在函数组件中，可以通过 useNavigate Hook 实现编程式导航。在 action 中调用 navigate 方法并传入目标路径即可跳转。

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

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

  const handleAction = () => {
    // 执行某些逻辑
    navigate('/target-path'); // 跳转到目标路径
  };

  return <button onClick={handleAction}>跳转</button>;
}

使用 react-router-dom 的 useHistory（v5 及以下版本）
在旧版 react-router-dom（v5 及以下）中，可以通过 useHistory Hook 实现跳转。

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  const handleAction = () => {
    // 执行某些逻辑
    history.push('/target-path'); // 跳转到目标路径
  };

  return <button onClick={handleAction}>跳转</button>;
}

在类组件中使用 withRouter
如果是类组件，可以通过 withRouter 高阶组件注入 history 对象，再调用 history.push 实现跳转。

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  handleAction = () => {
    // 执行某些逻辑
    this.props.history.push('/target-path'); // 跳转到目标路径
  };

  render() {
    return <button onClick={this.handleAction}>跳转</button>;
  }
}

export default withRouter(MyComponent);

直接使用 <Link> 组件
如果跳转由用户交互触发（如点击按钮），可以直接用 <Link> 组件包裹按钮，避免手动处理导航逻辑。

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link to="/target-path">
      <button>跳转</button>
    </Link>
  );
}

注意事项