diff --git a/docs/api/components/Link.md b/docs/api/components/Link.md
index 6cbb567b1c..ba86977208 100644
--- a/docs/api/components/Link.md
+++ b/docs/api/components/Link.md
@@ -27,6 +27,13 @@ name through the link's properties to the resulting url.
The className a `Link` receives when it's route is active. Defaults to
`active`.
+### `onClick`
+
+A custom handler for the click event. Works just like a handler on an ``
+tag - calling `e.preventDefault()` or returning `false` will prevent the
+transition from firing, while `e.stopPropagation()` will prevent the event
+from bubbling.
+
### *others*
You can also pass props you'd like to be on the `` such as a title, id, or className.
diff --git a/modules/components/Link.js b/modules/components/Link.js
index 6fa461af31..ebdffe368d 100644
--- a/modules/components/Link.js
+++ b/modules/components/Link.js
@@ -52,7 +52,8 @@ var Link = React.createClass({
propTypes: {
to: React.PropTypes.string.isRequired,
activeClassName: React.PropTypes.string.isRequired,
- query: React.PropTypes.object
+ query: React.PropTypes.object,
+ onClick: React.PropTypes.func
},
getDefaultProps: function () {
@@ -108,13 +109,23 @@ var Link = React.createClass({
});
},
- handleClick: function (event) {
+ handleClick: function(event) {
+ var allowTransition = true;
+ var ret;
+
+ if (this.props.onClick)
+ ret = this.props.onClick(event);
+
if (isModifiedEvent(event) || !isLeftClick(event))
return;
+ if (ret === false || event.preventDefaulted === true)
+ allowTransition = false;
+
event.preventDefault();
- transitionTo(this.props.to, this.getParams(), this.props.query);
+ if (allowTransition)
+ transitionTo(this.props.to, this.getParams(), this.props.query);
},
render: function () {