如何设置在反应路由器链路的点击上执行功能的超时?

Question

>假设有一个反应路由器链路组件。

class MyLink extends Component {
handleOnClick = () => {
doSomething();
// Expecting to have a timeout before routing to another route
};
render() {
return (
<StyledLink
to="/stock"
onClick={this.handleOnClick}
/>
);
}
}

如何在路由历史记录路径之前设置onClick事件后的超时？

编辑

我已经重新发布了另一个具有完整用例和解决方案的问题。

Answer 1

这取决于你想做什么以及doSomething((做什么。

如果你的doSomething((函数不是异步的：

handleOnClick = (e) => {
e.preventDefault(); //prevent transition
doSomething();
// redirect after 1 second
window.setTimeout(() => {
this.props.history.push(this.props.match.path);
}, 1000)
};

如果doSomething((是异步的，那么你可以等待它完成，然后重定向：

handleOnClick = async (e) => {
e.preventDefault(); //prevent transition
await doSomething(); // wait until it finishes
// redirect
this.props.history.push(this.props.match.path);
};

或两者结合：

handleOnClick = async (e) => {
e.preventDefault(); //prevent transition
await doSomething(); // wait until it finishes
// redirect 1 second after doSomething() finishes.
window.setTimeout(() => {
this.props.history.push(this.props.match.path);
}, 1000)
};

请记住，如果函数是异步的，则处理任何错误。

this.props.match.path将获取 Link 的 "to" 属性中的路径。

另外，不要忘记在组件中使用 withRouter。

版本：

"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",

Answer 2

好吧，您可以阻止链接导航应用程序，但稍后将以编程方式导航它：

handleOnClick = (e) => {
e.preventDefault(); //prevent transition
doSomething();
// and after timeout
window.setTimeout(() => {
this.props.history.push('/stock')
// history is available by design in this.props when using react-router
}, 3000) // 3000 means 3 seconds
};