如何延迟NavLink的反应?

时间:2018-08-15 05:53:08

标签: javascript reactjs react-router react-router-v4 react-router-dom

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

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

单击NavLink之后,我想等待500毫秒再转到“ /关于”。我该怎么办?

编辑:我想使用NavLink activeStyle属性

1 个答案:

答案 0 :(得分:3)

首先,用withRouter包裹您的组件。Doc

import { withRouter } from 'react-router'

withRouter(Component)

然后使用this.props.history.push('/About')浏览您的“延迟”功能。 Doc

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