How to use onClick event on react Link component

Question

I am using the Link component from the reactjs router and I cannot get the onClickevent working  This is the code    lt Link to  this props myroute  onClick  hello    gt Here lt  Link gt    Is this the way to do it or another way

User · Accepted Answer

You are passing hello   as a string  also hello   means execute hello immediately   try  onClick  hello

User · Answer

I don t believe this is a good pattern to use in general  Link will run your onClick event and then navigate to the route  so there will be a slight delay navigating to the new route  A better strategy is to navigate to the new route with the  to  prop as you have done  and in the new component s componentDidMount   function you can fire your hello function or any other function  It will give you the same result  but with a much smoother transition between routes   For context  I noticed this while updating my redux store with an onClick event on Link like you have here  and it caused a   3 second blank-white-screen delay before mounting the new route s component  There was no api call involved  so I was surprised the delay was so big  However  if you re just console logging  hello  the delay might not be noticeable

User · Answer

You should use this    lt Link to  this props myroute  onClick  hello  gt Here lt  Link gt    Or  if method hello lays at this class     lt Link to  this props myroute  onClick  this hello  gt Here lt  Link gt    Update  For ES6 and latest if you want to bind some param with click method  you can use this       const someValue    some                 lt Link to  this props myroute  onClick       gt  hello someValue   gt Here lt  Link gt

[reactjs] How to use onClick event on react Link component?

Examples related to reactjs

Examples related to react-router

Examples related to react-redux