Reactjs react router dom Link onclick获取路径

我试图在单击

时处理路径，需要使用

e.preventDefault（）用于防止路由器内的动画，因此这是我的代码，基本上我无法捕获更改历史目标的位置路径：

import React from 'react'; 
import { Link } from "react-router-dom";
export default class NavTransitions extends React.Component   {  
    constructor(props) {
        super(props);  
        this.changeRoutePath=this.changeRoutePath.bind(this);    
    } 
    changeRoutePath(e){
        e.preventDefault(); 
        this.props.history.push(this.match.path);
        console.log('this.match.path '+this.match.path);
        console.log('changeRoutePath');
    }
    render(){ 
        return(
            <div>
                <Link to="/item" 
                    onClick={this.changeRoutePath}>Prevent </Link>
           </div>
        );
    }
}

从“React”导入React；
从“react router dom”导入{Link}；
导出默认类NavReact.Component{
建造师（道具）{
超级（道具）；
this.changeRoutePath=this.changeRoutePath.bind（this）；
} 
更改路径路径路径（e）{
e、 预防默认值（）；
this.props.history.push（this.match.path）；
log（'this.match.path'+this.match.path）；
console.log（'changeRoutePath'）；
}
render（）{
返回(
防止
);
}
}

错误显示此.math未定义
问题在于如何访问匹配：

this.match

但应该是这样

this.props.match

像这样：

changeRoutePath(e){
        e.preventDefault(); 
        this.props.history.push(this.props.match.path);
        console.log('this.props.match.path '+ this.props.match.path);
        console.log('changeRoutePath');
    }

这将帮助您解决最初的问题

其他方法

一种简单的方法是根本不使用链接组件，因为您只想在单击和重定向时执行某些操作。因此，只需将简单html组件与onclick事件一起使用，并将链接作为参数发送：

<a 
    href={'#'} 
    onClick={(e) => this.changeRoutePath(e, '/item')}>
    Prevent 
</a>

也可以将链接组件与箭头函数一起使用，而无需在构造函数中绑定它们：

<Link 
    to="/item" 
    onClick={(e) => this.changeRoutePath(e)}>
    Prevent 
</Link>

changeRoutePath(e){
    e.preventDefault();
    this.props.history.push(this.props.match.path);
}

反应路由器版本：

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

希望有帮助。
问题在于如何访问match：

this.match

但应该是这样

this.props.match

像这样：

changeRoutePath(e){
        e.preventDefault(); 
        this.props.history.push(this.props.match.path);
        console.log('this.props.match.path '+ this.props.match.path);
        console.log('changeRoutePath');
    }

这将帮助您解决最初的问题

其他方法

一种简单的方法是根本不使用链接组件，因为您只想在单击和重定向时执行某些操作。因此，只需将简单html组件与onclick事件一起使用，并将链接作为参数发送：

<a 
    href={'#'} 
    onClick={(e) => this.changeRoutePath(e, '/item')}>
    Prevent 
</a>

也可以将链接组件与箭头函数一起使用，而无需在构造函数中绑定它们：

<Link 
    to="/item" 
    onClick={(e) => this.changeRoutePath(e)}>
    Prevent 
</Link>

changeRoutePath(e){
    e.preventDefault();
    this.props.history.push(this.props.match.path);
}

反应路由器版本：

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

希望有帮助。
既然您只是想阻止该操作并将窗口位置推到浏览器历史记录中，那么在链接标签上添加
to=
有什么意义？@KeplerIO默认情况下，它添加到了我的代码中的
链接中。您可以在不使用“to=”的情况下测试它的使用情况，看看是否一切正常（应该正常）。我知道这是多余的，因为你会覆盖“onClick”函数，这很好。我明白了，如果它改变了功能，我真的很感兴趣。很难适应新库中所有隐藏的魔法。在链接标签上添加
to=
有什么意义，因为你只是想阻止该操作并将窗口位置推到浏览器历史记录中？@KeplerIO默认情况下，它被添加到我的代码中的
链接中。您可以在不使用“to=”的情况下测试它的使用情况，看看是否一切正常（应该正常）。我知道这是多余的，因为你会覆盖“onClick”函数，这很好。我明白了，如果它改变了功能，我真的很感兴趣。很难适应新图书馆里所有隐藏的魔法。