react-router-dom 链接 onclick 获取路径 [英] react-router-dom Link onclick get the path

问题描述

当我点击 <Link/> 时我试图处理路径，我需要使用 e.preventDefault(); 来防止路由器内的动画，所以这是我的代码，基本上我无法捕获更改历史目标的位置路径:

从'react'导入React；从react-router-dom"导入{链接}；导出默认类 NavTransitions extends React.Component {构造函数(道具){超级(道具)；this.changeRoutePath=this.changeRoutePath.bind(this);}更改路由路径(e){e.preventDefault();this.props.history.push(this.match.path);console.log('this.match.path'+this.match.path);console.log('changeRoutePath');}使成为(){返回(<div><链接到=/项目"onClick={this.changeRoutePath}>Prevent </Link>

);}}

错误提示 this.math 未定义

解决方案

问题在于您如何访问 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');}

这应该可以帮助您解决最初的问题.

其他方法

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

this.changeRoutePath(e, '/item')}>避免</a>

和函数:

changeRoutePath(e, link){e.preventDefault();this.props.history.push(link);}

您也可以使用带有箭头函数的 Link 组件，而无需在构造函数中绑定它们:

<链接到=/项目"onClick={(e) =>this.changeRoutePath(e)}>避免</链接>更改路由路径(e){e.preventDefault();this.props.history.push(this.props.match.path);}

另外，记得在组件中使用withRouter:

import { Link, withRouter } from "react-router-dom";class NavTransitions 扩展 React.Component {...}导出默认 withRouter(NavTransitions);

反应路由器版本:

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

希望有帮助.

I trying to handle the path when I click <Link/> and I need using e.preventDefault(); for prevent animations inside the router so this is my code,basically I can not capture the location path for change the history target:

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>
        );
    }
}

The error says this.math is undefined

解决方案

The problem is how you are accessing match:

this.match

but it should be

this.props.match

Like this:

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');
    }

This should help you with the initial problem.

Other approaches

An easy way of doing this is not to use a Link component at all, since you only want to do something on click and the redirect. So just use the simple html component with the onclick event and send the link as a param:

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

And the function:

changeRoutePath(e, link){
    e.preventDefault();
    this.props.history.push(link);
}

You can also use the Link component with arrow functions as well, without the need of binding them in the constructor:

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

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

Also, remember to use withRouter in the component:

import { Link, withRouter } from "react-router-dom";
class NavTransitions extends React.Component   {  
...
}
export default withRouter(NavTransitions);

React router version:

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

Hope it helps.

这篇关于react-router-dom 链接 onclick 获取路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！