React Router 4：主组件AJAX请求后跳转至其他组件的最佳方法

嘿，我刚接触React Router的时候也跟你一样，总想着找个跟Vue里this.$router.push一模一样的东西，折腾了一阵才摸清楚门道。给你分享几种在主组件里实现AJAX完成后跳转的常用方法，都是现在社区里的最佳实践：

1. 使用useNavigate钩子（React Router v6+ 首推） #

这是目前最直观、最常用的方式，完全对标Vue里的跳转逻辑，只适用于函数组件：

• 第一步先导入钩子：import { useNavigate } from 'react-router-dom';
• 在组件内部调用钩子，拿到跳转函数：const navigate = useNavigate();
• 等AJAX请求成功后，直接调用navigate('/你的目标路径')就行

给你写个完整的示例：

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

function MainComponent() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const handleAjaxSubmit = async () => {
    setLoading(true);
    try {
      // 模拟你的AJAX请求，比如用fetch或者axios
      const res = await fetch('https://api.example.com/your-endpoint');
      const data = await res.json();
      // 请求成功，跳转到目标页面
      navigate('/success-page');
    } catch (err) {
      console.error('请求失败:', err);
      // 这里可以加错误提示逻辑
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleAjaxSubmit} disabled={loading}>
      {loading ? '请求中...' : '提交并跳转'}
    </button>
  );
}

export default MainComponent;

2. 类组件的处理方式 #

如果你还在维护类组件，React Router v6官方移除了withRouter高阶组件，但我们可以自己封装一个，或者把useNavigate函数通过props传给类组件：

封装withRouter高阶组件 #

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

// 自定义withRouter高阶组件
function withRouter(Component) {
  return function WrappedComponent(props) {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return (
      <Component
        {...props}
        router={{ navigate, location, params }}
      />
    );
  };
}

// 你的类组件
class MainClassComponent extends React.Component {
  state = { loading: false };

  handleAjaxCall = async () => {
    this.setState({ loading: true });
    try {
      await fetch('https://api.example.com/your-endpoint');
      // 通过props里的router对象跳转
      this.props.router.navigate('/target-page');
    } catch (err) {
      console.error(err);
    } finally {
      this.setState({ loading: false });
    }
  };

  render() {
    const { loading } = this.state;
    return (
      <button onClick={this.handleAjaxCall} disabled={loading}>
        {loading ? '加载中...' : '提交跳转'}
      </button>
    );
  }
}

// 用高阶组件包装后导出
export default withRouter(MainClassComponent);

3. 用Navigate组件实现条件跳转 #

如果你的场景是根据AJAX请求的状态来触发跳转（比如请求成功后直接渲染跳转组件），可以用Navigate组件，适合在渲染逻辑里做判断：

import { useState } from 'react';
import { Navigate } from 'react-router-dom';

function MainComponent() {
  const [isRequestSuccess, setIsRequestSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleAjax = async () => {
    setLoading(true);
    try {
      await fetch('https://api.example.com/your-endpoint');
      setIsRequestSuccess(true);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 如果请求成功，直接渲染Navigate组件完成跳转
  if (isRequestSuccess) {
    // replace属性可选，加上的话不会在浏览器历史记录里留下当前页面的记录
    return <Navigate to="/success-page" replace />;
  }

  return (
    <button onClick={handleAjax} disabled={loading}>
      {loading ? '处理中...' : '提交'}
    </button>
  );
}

export default MainComponent;

总的来说，现在React Router v6+里最推荐的就是useNavigate钩子，写法简洁逻辑清晰，跟你熟悉的Vue跳转方式逻辑完全一致，只是调用方式不同而已。如果是类组件，自定义withRouter也能完美解决问题。

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