[changed] Do not add "active" class by default

Must use <Link activeClassName> or <Link activeStyle> in order to
enable "active" behavior on links. If neither of these are present,
links do not check if they are active.

Fixes remix-run#1873

Author: mjackson

modules/Link.js

@@ -11,6 +11,14 @@ function isModifiedEvent(event) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 
+function isEmptyObject(object) {
+  for (var p in object)
+    if (object.hasOwnProperty(p))
+      return false;
+
+  return true;
+}
+
 /**
  * A <Link> is used to create an <a> 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 };
+        }
       }
     }
 

modules/__tests__/Link-test.js

@@ -71,8 +71,8 @@ describe('A <Link>', function () {
       render() {
         return (
           <div>
-            <Link to="/hello/michael">Michael</Link>
-            <Link to="/hello/ryan">Ryan</Link>
+            <Link to="/hello/michael" activeClassName="active">Michael</Link>
+            <Link to="/hello/ryan" activeClassName="active">Ryan</Link>
           </div>
         );
       }