React Router v4 support

package.json

@@ -73,9 +73,10 @@
     "lodash": "^4.14.0",
     "mocha": "^2.5.3",
     "react": "^15.2.1",
+    "react-addons-test-utils": "^15.4.2",
     "react-bootstrap": "^0.30.0",
     "react-dom": "^15.2.1",
-    "react-router": "^2.6.0",
+    "react-router-dom": "^4.0.0",
     "release-script": "^1.0.2",
     "rimraf": "^2.5.4",
     "shelljs": "^0.7.2",

src/IndexLinkContainer.js

@@ -7,7 +7,7 @@ import LinkContainer from './LinkContainer';
 export default class IndexLinkContainer extends React.Component {
   render() {
     return (
-      <LinkContainer {...this.props} onlyActiveOnIndex />
+      <LinkContainer {...this.props} exact />
     );
   }
 }

src/LinkContainer.js

@@ -1,61 +1,45 @@
-// This is largely taken from react-router/lib/Link.
-
-import React from 'react';
-
-function isLeftClickEvent(event) {
-  return event.button === 0;
-}
-
-function isModifiedEvent(event) {
-  return !!(
-    event.metaKey ||
-    event.altKey ||
-    event.ctrlKey ||
-    event.shiftKey
-  );
-}
-
-function createLocationDescriptor(to, query, hash, state) {
-  if (query || hash || state) {
-    return { pathname: to, query, hash, state };
-  }
-
-  return to;
-}
-
-const propTypes = {
-  onlyActiveOnIndex: React.PropTypes.bool.isRequired,
-  to: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.object,
-  ]).isRequired,
-  query: React.PropTypes.string,
-  hash: React.PropTypes.string,
-  state: React.PropTypes.object,
-  action: React.PropTypes.oneOf([
-    'push',
-    'replace',
-  ]).isRequired,
-  onClick: React.PropTypes.func,
-  active: React.PropTypes.bool,
-  target: React.PropTypes.string,
-  children: React.PropTypes.node.isRequired,
-};
+import React, { Component, PropTypes } from 'react';
+import { Route } from 'react-router-dom';
+
+const isModifiedEvent = (event) =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+export default class LinkContainer extends Component {
+  static contextTypes = {
+    router: PropTypes.shape({
+      history: PropTypes.shape({
+        push: PropTypes.func.isRequired,
+        replace: PropTypes.func.isRequired,
+        createHref: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
 
-const contextTypes = {
-  router: React.PropTypes.object,
-};
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    onClick: PropTypes.func,
+    target: PropTypes.string,
+    replace: PropTypes.bool,
+    to: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
+    exact: PropTypes.bool,
+    strict: PropTypes.bool,
+    className: PropTypes.string,
+    activeClassName: PropTypes.string,
+    style: PropTypes.object,
+    activeStyle: PropTypes.object,
+    isActive: PropTypes.func,
+  };
 
-const defaultProps = {
-  onlyActiveOnIndex: false,
-  action: 'push',
-};
+  static defaultProps = {
+    replace: false,
+    activeClassName: 'active',
+  };
 
-class LinkContainer extends React.Component {
-  onClick = (event) => {
-    const {
-      to, query, hash, state, children, onClick, target, action,
-    } = this.props;
+  handleClick = (event) => {
+    const { children, onClick } = this.props;
 
     if (children.props.onClick) {
       children.props.onClick(event);
@@ -66,42 +50,62 @@ class LinkContainer extends React.Component {
     }
 
     if (
-      target ||
-      event.defaultPrevented ||
-      isModifiedEvent(event) ||
-      !isLeftClickEvent(event)
+      !event.defaultPrevented && // onClick prevented default
+      event.button === 0 && // ignore right clicks
+      !isModifiedEvent(event) // ignore clicks with modifier keys
     ) {
-      return;
-    }
+      event.preventDefault();
 
-    event.preventDefault();
+      const { history } = this.context.router;
+      const { replace, to } = this.props;
 
-    this.context.router[action](
-      createLocationDescriptor(to, query, hash, state)
-    );
-  };
+      if (replace) {
+        history.replace(to);
+      } else {
+        history.push(to);
+      }
+    }
+  }
 
   render() {
-    const { router } = this.context;
-    const { onlyActiveOnIndex, to, children, ...props } = this.props;
-
-    props.onClick = this.onClick;
-
-    // Ignore if rendered outside Router context; simplifies unit testing.
-    if (router) {
-      props.href = router.createHref(to);
+    const {
+      children,
+      replace, // eslint-disable-line no-unused-vars
+      to,
+      exact,
+      strict,
+      activeClassName,
+      className,
+      activeStyle,
+      style,
+      isActive: getIsActive,
+      ...props,
+    } = this.props;
 
-      if (props.active == null) {
-        props.active = router.isActive(to, onlyActiveOnIndex);
-      }
-    }
+    const href = this.context.router.history.createHref(
+      typeof to === 'string' ? { pathname: to } : to
+    );
 
-    return React.cloneElement(React.Children.only(children), props);
+    return (
+      <Route
+        path={typeof to === 'object' ? to.pathname : to}
+        exact={exact}
+        strict={strict}
+        children={({ location, match }) => {
+          const isActive = !!(getIsActive ? getIsActive(match, location) : match);
+
+          return React.cloneElement(
+            React.Children.only(children),
+            {
+              ...props,
+              className: isActive ? [className, activeClassName].join(' ') : className,
+              style: isActive ? { ...style, ...activeStyle } : style,
+              href,
+              onClick: this.handleClick,
+            }
+          );
+        }}
+      />
+    );
   }
 }
-
-LinkContainer.propTypes = propTypes;
-LinkContainer.contextTypes = contextTypes;
-LinkContainer.defaultProps = defaultProps;
-
-export default LinkContainer;

test/IndexLinkContainer.spec.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
+import ReactTestUtils from 'react-addons-test-utils';
 import * as ReactBootstrap from 'react-bootstrap';
-import ReactDOM from 'react-dom';
-import { createMemoryHistory, IndexRoute, Route, Router } from 'react-router';
+import { findDOMNode } from 'react-dom';
+import { Route, MemoryRouter as Router } from 'react-router-dom';
 
 import IndexLinkContainer from '../src/IndexLinkContainer';
 
@@ -19,25 +19,24 @@ describe('IndexLinkContainer', () => {
       describe('active state', () => {
         function renderComponent(location) {
           const router = ReactTestUtils.renderIntoDocument(
-            <Router history={createMemoryHistory(location)}>
-              <Route
-                path="/"
-                component={() => (
-                  <IndexLinkContainer to="/">
-                    <Component>Root</Component>
-                  </IndexLinkContainer>
-                )}
-              >
-                <IndexRoute />
-                <Route path="foo" />
-              </Route>
+            <Router initialEntries={[location]}>
+              <div>
+                <Route
+                  path="/"
+                  render={() => (
+                    <IndexLinkContainer to="/">
+                      <Component>Root</Component>
+                    </IndexLinkContainer>
+                  )}
+                />
+              </div>
             </Router>
           );
 
           const component = ReactTestUtils.findRenderedComponentWithType(
             router, Component
           );
-          return ReactDOM.findDOMNode(component);
+          return findDOMNode(component);
         }
 
         it('should be active on the index route', () => {