React中点击按钮先执行操作再跳转路由的实现方案

嘿，这个需求其实挺常见的，不管你用不用嵌套路由都能轻松搞定，我给你分两种常用场景来拆解：

如果你的组件是类组件，之前了解的this.props.history.push('/route')确实是可行的——只要你的组件是通过<Route>直接渲染的（哪怕是嵌套路由里的Route），都会自动拿到history、location这些路由相关的props。

要是你发现组件拿不到这些props（比如是嵌套在Route外面的子组件），可以用withRouter高阶组件把你的组件包一层，就能注入路由props了。

举个代码例子：

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

class MyButton extends React.Component {
  handleClick = () => {
    // 先执行你的自定义操作，比如保存表单数据、调用API
    this.doSomeCustomLogic()
      .then(() => {
        // 操作完成后，执行路由跳转
        this.props.history.push('/target-page');
      });
  };

  doSomeCustomLogic = () => {
    // 这里写你的自定义逻辑，比如异步请求
    return fetch('/api/save-data', { method: 'POST' });
  };

  render() {
    return <button onClick={this.handleClick}>执行操作并跳转</button>;
  }
}

// 用withRouter包裹，确保能拿到history props
export default withRouter(MyButton);

React Router v6之后弃用了history对象，改用useNavigate钩子，用法更简洁。不管是嵌套路由还是普通路由，只要组件在路由树范围内，都能直接用这个钩子。

示例代码：

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

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

  const handleClick = async () => {
    // 先执行自定义操作，比如更新状态、处理数据
    await doSomeCustomLogic();
    // 操作完成后跳转，支持相对路径或绝对路径
    // 比如当前在/dashboard，相对路径'profile'会跳到/dashboard/profile
    // 绝对路径'/about'会直接跳到/about
    navigate('/target-page');
  };

  const doSomeCustomLogic = async () => {
    // 异步逻辑示例
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('自定义操作完成');
  };

  return <button onClick={handleClick}>执行操作并跳转</button>;
}

export default MyButton;

嵌套路由不会影响这个逻辑的实现，你只需要注意跳转路径的写法：

• 用绝对路径（比如/dashboard/settings）：不管当前在哪个嵌套层级，都会直接跳转到指定的完整路径
• 用相对路径（比如settings）：会基于当前页面的路由路径进行跳转，适合在嵌套路由内部导航

另外，如果你的自定义操作是异步的，一定要等异步操作完成（比如用await或者.then()）再执行跳转，不然可能会出现操作还没完成就跳走的情况哦～

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