添加 onClick 到 React 路由

Question

我希望我的按钮能够：

1. 首先触发 POST 请求及其

   onClick

   回调
2. 然后使用反应路由器工具导航到另一个页面

我对每个案例都有建议。

这就是我实现回调处理的方式：

<button onClick={handleSubmitfunc}>Submit</button>

这就是我看到导航的方式：

<Link to='/secondpage' state={{from: variable}}>Submit</Link>

我下面的代码尝试恢复这两个要求，但没有达到目标。只触发回调，不触发导航：

<Link 
 to="/secondpage"
 onClick={handleSubmitfunc}
 state={{from: email}}>
Clickable Link
</Link>

组合失败会因为我有状态道具吗？

作为参考，我之前在：如何在 React Link 组件上使用 onClick 事件？中见过这个问题。这并没有多大帮助。

Answer 1

您可以使用

useNavigate

钩子进行重定向。

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

const navigate = useNavigate()
...

...

const handleSubmitfunc = async () => {
  await /* API call here */


  navigate('<route here>');
}