element that links to a route.
* When that route is active, the link gets an "active" class name
@@ -47,9 +55,8 @@ var Link = React.createClass({
getDefaultProps() {
return {
- className: '',
- activeClassName: 'active',
onlyActiveOnIndex: false,
+ className: '',
style: {}
};
},
@@ -83,26 +90,24 @@ var Link = React.createClass({
},
render() {
- var { to, query, onlyActiveOnIndex } = this.props;
-
- var props = {
- ...this.props,
- onClick: this.handleClick
- };
-
var { history } = this.context;
+ var { activeClassName, activeStyle, onlyActiveOnIndex, to, query, state, onClick, ...props } = this.props;
+
+ props.onClick = this.handleClick;
// Ignore if rendered outside the context
// of history, simplifies unit testing.
if (history) {
props.href = history.createHref(to, query);
- if (history.isActive(to, query, onlyActiveOnIndex)) {
- if (props.activeClassName)
- props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
+ if (activeClassName || (activeStyle != null && !isEmptyObject(activeStyle))) {
+ if (history.isActive(to, query, onlyActiveOnIndex)) {
+ if (activeClassName)
+ props.className += props.className === '' ? activeClassName : ` ${activeClassName}`;
- if (props.activeStyle)
- props.style = { ...props.style, ...props.activeStyle };
+ if (activeStyle)
+ props.style = { ...props.style, ...activeStyle };
+ }
}
}
diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js
index ad20ffa043..bae0faa41a 100644
--- a/modules/__tests__/Link-test.js
+++ b/modules/__tests__/Link-test.js
@@ -71,8 +71,8 @@ describe('A ', function () {
render() {
return (
- Michael
- Ryan
+ Michael
+ Ryan
);
}