Merge pull request #248 from kfitzgerald/context-fix

Use public API (withRouter) for React-Router instead of private contexts

Author: v12

.gitignore

@@ -5,3 +5,5 @@ node_modules
 amd
 lib
 tmp-bower-repo
+.idea
+package-lock.json

src/IndexLinkContainer.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 
 import LinkContainer from './LinkContainer';
 
 // Don't use a stateless function, to allow users to set a ref.
 /* eslint-disable react/prefer-stateless-function */
-export default class IndexLinkContainer extends React.Component {
+export class IndexLinkContainer extends React.Component {
   render() {
     return (
       <LinkContainer {...this.props} exact />
     );
   }
 }
 /* eslint-enable react/prefer-stateless-function */
+
+export default withRouter(IndexLinkContainer);

src/LinkContainer.js

@@ -1,22 +1,20 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Route } from 'react-router-dom';
+import { Route, withRouter } 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,
-  };
-
+export class LinkContainer extends Component {
   static propTypes = {
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+      replace: PropTypes.func.isRequired,
+      createHref: PropTypes.func.isRequired,
+    }).isRequired,
+    location: PropTypes.object,
+    match: PropTypes.object,
+    staticContext: PropTypes.object,
     children: PropTypes.element.isRequired,
     onClick: PropTypes.func,
     replace: PropTypes.bool,
@@ -58,21 +56,24 @@ export default class LinkContainer extends Component {
     ) {
       event.preventDefault();
 
-      const { history } = this.context.router;
-      const { replace, to } = this.props;
+      const { replace, to, history } = this.props;
 
       if (replace) {
         history.replace(to);
       } else {
         history.push(to);
       }
     }
-  }
+  };
 
   render() {
     const {
+      history,
+      location: _location,            // eslint-disable-line no-unused-vars
+      match: _match,                  // eslint-disable-line no-unused-vars
+      staticContext: _staticContext,  // eslint-disable-line no-unused-vars
       children,
-      replace, // eslint-disable-line no-unused-vars
+      replace,                          // eslint-disable-line no-unused-vars
       to,
       exact,
       strict,
@@ -84,7 +85,7 @@ export default class LinkContainer extends Component {
       ...props,
     } = this.props;
 
-    const href = this.context.router.history.createHref(
+    const href = history.createHref(
       typeof to === 'string' ? { pathname: to } : to
     );
 
@@ -114,3 +115,5 @@ export default class LinkContainer extends Component {
     );
   }
 }
+
+export default withRouter(LinkContainer);

test/LinkContainer.spec.js

@@ -4,7 +4,7 @@ import * as ReactBootstrap from 'react-bootstrap';
 import { findDOMNode } from 'react-dom';
 import { Route, MemoryRouter as Router } from 'react-router-dom';
 
-import LinkContainer from '../src/LinkContainer';
+import LinkContainer, { LinkContainer as RawLinkContainer } from '../src/LinkContainer';
 
 describe('LinkContainer', () => {
   [
@@ -62,7 +62,7 @@ describe('LinkContainer', () => {
         );
 
         const container = ReactTestUtils.findRenderedComponentWithType(
-          router, LinkContainer
+          router, RawLinkContainer
         );
         const component = ReactTestUtils.findRenderedComponentWithType(
           router, Component