react-router-dom Link onclick get the path

Question

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

c-chavez · Accepted Answer · 2018-08-28T17:04:21.203

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.

What is the point of putting `to=` on the Link tag since you're just going to prevent that operation and push the window location to the browser history? — , Dec 19 '19 at 22:33
@KeplerIO It was added by default to the `Link` in my code. You can test its usage without 'to=' and see if everything works (it should). I know it's redundant since you will override the 'onClick' function, good point. — c-chavez, Dec 31 '19 at 16:28
I see, I was genuinely interested if it changed functionality. It's hard getting used to all of the hidden magic in a new library. — , Jan 03 '20 at 19:30

react-router-dom Link onclick get the path

1 Answers1

Linked