React登录场景下如何在异步函数完成后实现页面跳转？

要解决这个问题，核心是移除按钮的href属性（避免点击后立即跳转），并在异步登录流程完成、确认拿到access_token后，通过路由方法手动跳转页面。

具体修改步骤： #

1. 移除Button的href属性
   原按钮的href会在点击时立即触发跳转，完全无视login函数的异步逻辑，所以先删掉这个属性。

2. 添加路由跳转逻辑
   假设你使用的是React Router（目前主流版本是v6+），先导入并使用useNavigate钩子来实现跳转：

修改后的完整代码示例：

// 先导入路由钩子（如果还没导入）
import { useNavigate } from 'react-router-dom';

// 在组件内部获取navigate函数
const navigate = useNavigate();

const login = async () => {
  try {
    const response = await LoginService({ email, password });
    if (response.access_token) {
      setReturned(true);
      console.log('ACCESS TOKEN IS RETURNED');
      // 拿到token后，执行页面跳转
      navigate('/dashboard');
    } else {
      throw new Error('NO ACCESS TOKEN');
    }
  } catch (error) {
    // 处理登录失败的场景，比如给用户提示错误信息
    console.error('登录出错:', error.message);
  }
};

// 移除href属性的按钮
<Button color='primary' onClick={login} className='btn-next' block>
  Login
</Button>

关键说明： #

• 移除href后，按钮点击只会触发login异步函数，确保等待登录请求完成后再执行后续操作。
• 用try/catch包裹异步逻辑，可以捕获登录失败（比如网络错误、无token返回）的情况，避免程序崩溃，同时可以在这里添加用户提示（比如弹出错误弹窗）。
• 如果你的项目用的是旧版React Router（v5及以下），可以用useHistory钩子替代useNavigate，跳转时调用history.push('/dashboard')。

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