如何延迟 NavLink 的反应? [英] How do I delay a NavLink in react?

问题描述

Delay = (e) => {
    e.preventDefault()
    setTimeout(() => {
        e.unpreventDefault() //make this work
    },500)
}

render() {
    <NavLink
        to='/About'
        onClick={this.Delay}
    >
        Delay Me!
    </NavLink>
}

单击 NavLink 后，我想等待 500 毫秒，然后再转到/关于".我该怎么做?

After clicking the NavLink, I want to wait 500ms before going to '/About'. How do I do that?

我想使用 NavLink activeStyle 属性

I want to use the NavLink activeStyle attribute

推荐答案

首先，包装你的组件使用 withRouter .文档

First, wrap your compoent use withRouter .Doc

import { withRouter } from 'react-router'

withRouter(Component)

然后使用 this.props.history.push('/About') 在您的 Delay 函数中导航.文档

Then use this.props.history.push('/About')to navigate in your Delay function. Doc

Delay = (e) => {
    e.preventDefault()
    setTimeout(() => {
        this.props.history.push('/About')
    },500)
}

这篇关于如何延迟 NavLink 的反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！