javascript - React-Router: Why won't <Link> component's onClick handler dispatch my action? -


i react-router's <link>to fire function on click looks <link> navigating next page before function has chance fire.

my component looks similar this:

<link to={`/path/to/${foo}`} onclick={() => myfunc(foo, bar)}>   <div>this link</div> </link> 

foo , bar props have been passed down parent components.

however, if call e.preventdefault, subsequent functions work fine:

<link     to={`/path/to/${foo}`}     onclick={(e) => e.preventdefault(); console.log('this works!')}>   <div>this link</div> </link> 

i imagine similar this, programmatically navigate route there has better (i.e. less hack-y) way of achieving effect.

does have suggestions, might me?

this directly not solution, can try instead of using link component, use simple a element, , move needed route inside onclick handler:

import { browserhistory } 'react-router';  <a onclick={   browserhistory.push(`/path/to/${foo}`)   myfunc(foo, bar) }>   <div>this link</div> </a> 

Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -