我点击<Link/>
时尝试处理路径,我需要使用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>
);
}
}
错误说this.math未定义
答案 0 :(得分:4)
问题在于您如何访问匹配项:
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>
函数:
changeRoutePath(e, link){
e.preventDefault();
this.props.history.push(link);
}
您还可以将Link组件与箭头函数一起使用,而无需在构造函数中进行绑定:
<Link
to="/item"
onClick={(e) => this.changeRoutePath(e)}>
Prevent
</Link>
changeRoutePath(e){
e.preventDefault();
this.props.history.push(this.props.match.path);
}
此外,请记住在组件中使用withRouter:
import { Link, withRouter } from "react-router-dom";
class NavTransitions extends React.Component {
...
}
export default withRouter(NavTransitions);
反应路由器版本:
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
希望有帮助。