如何将 React 路由器链路组件的重定向延迟 1 秒?

Question

当您单击链接时，浏览器会尝试尽快重定向用户。如何为此过程添加 1 秒延迟？

我有以下链接：

<Link
to={{
pathname: `pathname`,
hash: `#hash`,
}}
onClick={this.delayRedirect}
>

这是我的延迟重定向函数的样子：

delayRedirect() {
// not sure what to put here, to delay the redirect by 1 second
}

有什么想法吗？谢谢！

Answer 1

import { withRouter } from 'react-router'
class Home extends Component {
delayRedirect = event => {
const { history: { push } } = this.props;
event.preventDefault();
setTimeout(()=>push(to), 1000);
}
};
<Link
to={{
pathname: `pathname`,
hash: `#hash`,
}}
onClick={this.delayRedirect}
>
}
export default withRouter(Home);

使用历史记录在间隔一秒后推送新路线

Answer 2

这是我的函数组件版本，基于 @Shishir 的答案：

import React from "react";
import { Link, useHistory } from "react-router-dom";
export default function CustomLink({ to, children }) {
const history = useHistory();
function delayAndGo(e) {
e.preventDefault();
// Do something..
setTimeout(() => history.push(to), 300);
}
return (
<Link to={to} onClick={delayAndGo}>
{children}
</Link>
);
}

Answer 3

根据 Pedro 的回答，这里有一种方法可以在像 NavBar 这样的组件中添加 delayAndGo 函数：

import React from "react";
import { Link, useHistory } from "react-router-dom";
export default function NavBar() {
const history = useHistory();
function delayAndGo(e, path) {
e.preventDefault();
// Do something..
setTimeout(() => history.push(path), 300);
}
return (
<Link to="/" onClick={(e) => delayAndGo(e, "/")}>
Home
</Link>
<Link to="/about" onClick={(e) => delayAndGo(e, "/about")}>
About
</Link>
<Link to="/portfolio" onClick={(e) => delayAndGo(e, "/portfolio")}>
Portfolio
</Link>
);
}

请注意，Link元素的to值在此方法中无关紧要。

Answer 4

安装模块

npm install p-min-delay
npm i @loadable/component

并像导入一样

import loadable from '@loadable/component'
import pMinDelay from 'p-min-delay'