反应路由器v4链接onclick获取链接道具

Question

我是使用React Router v4的新手。我有一个链接，该链接在onClick事件中运行一个函数，然后重定向到特定路由。

这是链接：

<Link className={''} 
    to={'/test'}
    onClick={this.testFunction}>To test</Link>

和测试功能：

testFunction(event){
    e.preventDefault();
    // do some things...
    this.props.history.push('/test');
}

这行得通，但是我需要两次编写“ / test”路由（在Link组件和函数中）。

是否有获取“ to”道具的方法，所以我不必写两次？

Answer 1

如果在组件中使用“ withRouter”：

import {Link, withRouter} from 'react-router-dom';
...    
export default withRouter(TestComponent);

您可以使用以下方法访问路线的路径：

this.props.match.path

在您的代码中使用它：

testFunction(event){
    e.preventDefault();
    // do some things...
    this.props.history.push(this.props.match.path);
}

在组件中使用“ withRouter”时，您可以访问路线的比赛，位置和历史记录道具。

withRouter官方文档

match 官方文档

希望有帮助！