如何使用 React 中的函数更改页面

Question

当用户登录并单击按钮时，会调用一个函数，该函数会调用一个返回 Promise 的函数。当用户登录时，href 属性负责更改页面。我需要更改函数登录内的页面，因为我尝试在 href 上使用三元，但它不会等待返回 Promise 的函数返回。

我的目的是带上access token后切换到/dashboard页面

功能登录：

 const login = async () => {
        const response = await LoginService({email, password})
        if (response.access_token) {
            setReturned(true)
            console.log('ACCESS TOKEN IS RETURNED')
           } else {
            throw new Error('NO ACCESS TOKEN')
        }

    }

                       




<Button color='primary' onClick={login} className='btn-next' block href={'/dashboard'} >
                                Login
 </Button>

Answer 1

我认为你在这里混合了担忧。这些按钮应该触发操作，并且您正在使用锚标记来执行操作和重定向，所以我想说您需要稍微改变一下这里的方法。

黑客解决方案：

const login = async () => {
  const response = await LoginService({ email, password });
  if (response.access_token) {
    setReturned(true);
    console.log('ACCESS TOKEN IS RETURNED');

    window.location.href = '/dashboard';
  } else {
    throw new Error('NO ACCESS TOKEN');
  }
};

<Button color='primary' onClick={login} className='btn-next'>
  Login
</Button>

我想向您推荐https://reactrouter.com/以获得更好的应用程序路由策略。