I am using the Link component from the reactjs router and I cannot get the onClickevent working. This is the code:
<Link to={this.props.myroute} onClick='hello()'>Here</Link>
Is this the way to do it or another way?
To set an onClick listener on a link in React: Set the onClick prop on the link. The function you pass to the prop will get called every time the link is clicked.
To use onClick event on React Router Link, we can put the states we want pass between routes in the URL parameter. <Link to={"/about/" + name}>{name}</Link>; to add the name URL parameter to the /about route.
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
You are passing hello()
as a string, also hello()
means execute hello
immediately.
try
onClick={hello}
You should use this:
<Link to={this.props.myroute} onClick={hello}>Here</Link>
Or (if method hello
lays at this class):
<Link to={this.props.myroute} onClick={this.hello}>Here</Link>
Update: For ES6 and latest if you want to bind some param with click method, you can use this:
const someValue = 'some';
....
<Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>
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.
const onLinkClick = (e) => {
e.preventDefault();
---do your stuff---
history.push('/your-route');
};
<a href='/your-route' onClick={onLinkClick}> Navigate </a>
or
<Link to='/your-route' onClick={onLinkClick}> Navigate </Link>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With