react-router 3.2.1 → 3.2.5

package/docs/API.md

@@ -135,6 +135,9 @@ A custom handler for the click event. Works just like a handler on an `<a>` tag
 ##### `onlyActiveOnIndex`
 If `true`, the `<Link>` will only be active when the current route exactly matches the linked route.
 
+##### `innerRef`
+Allows access to the underlying `ref` of the component.
+
 ##### *others*
 You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `className`, etc.
 
@@ -153,6 +156,11 @@ Given a route like `<Route path="/users/:userId" />`:
 
 // change style when link is active
 <Link to="/users" style={{color: 'white'}} activeStyle={{color: 'red'}}>Users</Link>
+
+const refCallback = node => {
+  // `node` refers to the mounted DOM element or null when unmounted
+}
+<Link to="/" innerRef={refCallback} />
 ```
 
 ### `<IndexLink>`
@@ -338,7 +346,9 @@ class Users extends React.Component {
 ```
 
 ##### `getComponent(nextState, callback)`
-Same as `component` but asynchronous, useful for code-splitting.
+Same as `component` but asynchronous, useful for code-splitting. 
+
+You can pass a Promise, in which case you should not use the `callback` function and instead use `resolve` like you normally would. You can also pass an async function, which is a Promise under the hood, and just `return` like normal. Any thrown exception will report an error to the router.
 
 ###### `callback` signature
 `cb(err, component)`
@@ -350,6 +360,7 @@ Same as `component` but asynchronous, useful for code-splitting.
 }} />
 ```
 
+
 ##### `getComponents(nextState, callback)`
 Same as `components` but asynchronous, useful for
 code-splitting.

package/es/ContextUtils.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 
 // Works around issues with context updates failing to propagate.
@@ -14,15 +15,17 @@ function makeContextName(name) {
   return '@@contextSubscriber/' + name;
 }
 
+var prefixUnsafeLifecycleMethods = typeof React.forwardRef !== 'undefined';
+
 export function ContextProvider(name) {
-  var _childContextTypes, _ref2;
+  var _childContextTypes, _config;
 
   var contextName = makeContextName(name);
   var listenersKey = contextName + '/listeners';
   var eventIndexKey = contextName + '/eventIndex';
   var subscribeKey = contextName + '/subscribe';
 
-  return _ref2 = {
+  var config = (_config = {
     childContextTypes: (_childContextTypes = {}, _childContextTypes[contextName] = contextProviderShape.isRequired, _childContextTypes),
 
     getChildContext: function getChildContext() {
@@ -33,10 +36,16 @@ export function ContextProvider(name) {
         subscribe: this[subscribeKey]
       }, _ref;
     },
+
+
+    // this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
     componentWillMount: function componentWillMount() {
       this[listenersKey] = [];
       this[eventIndexKey] = 0;
     },
+
+
+    // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
     componentWillReceiveProps: function componentWillReceiveProps() {
       this[eventIndexKey]++;
     },
@@ -47,7 +56,7 @@ export function ContextProvider(name) {
         return listener(_this[eventIndexKey]);
       });
     }
-  }, _ref2[subscribeKey] = function (listener) {
+  }, _config[subscribeKey] = function (listener) {
     var _this2 = this;
 
     // No need to immediately call listener here.
@@ -58,28 +67,36 @@ export function ContextProvider(name) {
         return item !== listener;
       });
     };
-  }, _ref2;
+  }, _config);
+
+  if (prefixUnsafeLifecycleMethods) {
+    config.UNSAFE_componentWillMount = config.componentWillMount;
+    config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps;
+    delete config.componentWillMount;
+    delete config.componentWillReceiveProps;
+  }
+  return config;
 }
 
 export function ContextSubscriber(name) {
-  var _contextTypes, _ref4;
+  var _contextTypes, _config2;
 
   var contextName = makeContextName(name);
   var lastRenderedEventIndexKey = contextName + '/lastRenderedEventIndex';
   var handleContextUpdateKey = contextName + '/handleContextUpdate';
   var unsubscribeKey = contextName + '/unsubscribe';
 
-  return _ref4 = {
+  var config = (_config2 = {
     contextTypes: (_contextTypes = {}, _contextTypes[contextName] = contextProviderShape, _contextTypes),
 
     getInitialState: function getInitialState() {
-      var _ref3;
+      var _ref2;
 
       if (!this.context[contextName]) {
         return {};
       }
 
-      return _ref3 = {}, _ref3[lastRenderedEventIndexKey] = this.context[contextName].eventIndex, _ref3;
+      return _ref2 = {}, _ref2[lastRenderedEventIndexKey] = this.context[contextName].eventIndex, _ref2;
     },
     componentDidMount: function componentDidMount() {
       if (!this.context[contextName]) {
@@ -88,6 +105,9 @@ export function ContextSubscriber(name) {
 
       this[unsubscribeKey] = this.context[contextName].subscribe(this[handleContextUpdateKey]);
     },
+
+
+    // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
     componentWillReceiveProps: function componentWillReceiveProps() {
       var _setState;
 
@@ -105,11 +125,17 @@ export function ContextSubscriber(name) {
       this[unsubscribeKey]();
       this[unsubscribeKey] = null;
     }
-  }, _ref4[handleContextUpdateKey] = function (eventIndex) {
+  }, _config2[handleContextUpdateKey] = function (eventIndex) {
     if (eventIndex !== this.state[lastRenderedEventIndexKey]) {
       var _setState2;
 
       this.setState((_setState2 = {}, _setState2[lastRenderedEventIndexKey] = eventIndex, _setState2));
     }
-  }, _ref4;
+  }, _config2);
+
+  if (prefixUnsafeLifecycleMethods) {
+    config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps;
+    delete config.componentWillReceiveProps;
+  }
+  return config;
 }

package/es/InternalPropTypes.js

@@ -1,4 +1,4 @@
-import { func, object, arrayOf, oneOfType, element, shape, string } from 'prop-types';
+import { func, object, arrayOf, oneOfType, element, shape, elementType } from 'prop-types';
 
 export function falsy(props, propName, componentName) {
   if (props[propName]) return new Error('<' + componentName + '> should not have a "' + propName + '" prop');
@@ -13,7 +13,7 @@ export var history = shape({
   goForward: func.isRequired
 });
 
-export var component = oneOfType([func, string]);
+export var component = elementType;
 export var components = oneOfType([component, object]);
 export var route = oneOfType([object, element]);
 export var routes = oneOfType([route, arrayOf(route)]);

package/es/Link.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 import React from 'react';
 import createReactClass from 'create-react-class';
-import { bool, object, string, func, oneOfType } from 'prop-types';
+import { bool, object, string, func, oneOfType, shape, elementType } from 'prop-types';
 import invariant from 'invariant';
 import { routerShape } from './PropTypes';
 import { ContextSubscriber } from './ContextUtils';
@@ -56,7 +56,8 @@ var Link = createReactClass({
     activeClassName: string,
     onlyActiveOnIndex: bool.isRequired,
     onClick: func,
-    target: string
+    target: string,
+    innerRef: oneOfType([string, func, shape({ current: elementType })])
   },
 
   getDefaultProps: function getDefaultProps() {
@@ -90,7 +91,8 @@ var Link = createReactClass({
         activeClassName = _props.activeClassName,
         activeStyle = _props.activeStyle,
         onlyActiveOnIndex = _props.onlyActiveOnIndex,
-        props = _objectWithoutProperties(_props, ['to', 'activeClassName', 'activeStyle', 'onlyActiveOnIndex']);
+        innerRef = _props.innerRef,
+        props = _objectWithoutProperties(_props, ['to', 'activeClassName', 'activeStyle', 'onlyActiveOnIndex', 'innerRef']);
 
     // Ignore if rendered outside the context of router to simplify unit testing.
 
@@ -101,7 +103,7 @@ var Link = createReactClass({
     if (router) {
       // If user does not specify a `to` prop, return an empty anchor tag.
       if (!to) {
-        return React.createElement('a', props);
+        return React.createElement('a', _extends({}, props, { ref: innerRef }));
       }
 
       var toLocation = resolveToLocation(to, router);
@@ -122,7 +124,7 @@ var Link = createReactClass({
       }
     }
 
-    return React.createElement('a', _extends({}, props, { onClick: this.handleClick }));
+    return React.createElement('a', _extends({}, props, { onClick: this.handleClick, ref: innerRef }));
   }
 });
 

package/es/Router.js

@@ -25,13 +25,16 @@ var propTypes = {
 
   // PRIVATE: For client-side rehydration of server match.
   matchContext: object
+};
 
-  /**
-   * A <Router> is a high-level API for automatically setting up
-   * a router that renders a <RouterContext> with all the props
-   * it needs each time the URL changes.
-   */
-};var Router = createReactClass({
+var prefixUnsafeLifecycleMethods = typeof React.forwardRef !== 'undefined';
+
+/**
+ * A <Router> is a high-level API for automatically setting up
+ * a router that renders a <RouterContext> with all the props
+ * it needs each time the URL changes.
+ */
+var Router = createReactClass({
   displayName: 'Router',
 
   propTypes: propTypes,
@@ -87,6 +90,9 @@ var propTypes = {
 
     return _createTransitionManager(history, createRoutes(routes || children));
   },
+
+
+  // this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
   componentWillMount: function componentWillMount() {
     var _this = this;
 
@@ -106,6 +112,7 @@ var propTypes = {
   },
 
 
+  // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
   /* istanbul ignore next: sanity check */
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
     process.env.NODE_ENV !== 'production' ? warning(nextProps.history === this.props.history, 'You cannot change <Router history>; it will be ignored') : void 0;
@@ -146,4 +153,11 @@ var propTypes = {
   }
 });
 
+if (prefixUnsafeLifecycleMethods) {
+  Router.prototype.UNSAFE_componentWillReceiveProps = Router.prototype.componentWillReceiveProps;
+  Router.prototype.UNSAFE_componentWillMount = Router.prototype.componentWillMount;
+  delete Router.prototype.componentWillReceiveProps;
+  delete Router.prototype.componentWillMount;
+}
+
 export default Router;

package/es/RouterContext.js

@@ -4,6 +4,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
 import invariant from 'invariant';
 import React from 'react';
+import { isValidElementType } from 'react-is';
 import createReactClass from 'create-react-class';
 import { array, func, object } from 'prop-types';
 
@@ -83,7 +84,9 @@ var RouterContext = createReactClass({
           }
         }
 
-        if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) === 'object') {
+        // Handle components is object for { [name]: component } but not valid element
+        // type of react, such as React.memo, React.lazy and so on.
+        if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) === 'object' && !isValidElementType(components)) {
           var elements = {};
 
           for (var key in components) {

package/lib/ContextUtils.js

@@ -4,6 +4,10 @@ exports.__esModule = true;
 exports.ContextProvider = ContextProvider;
 exports.ContextSubscriber = ContextSubscriber;
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -24,15 +28,17 @@ function makeContextName(name) {
   return '@@contextSubscriber/' + name;
 }
 
+var prefixUnsafeLifecycleMethods = typeof _react2.default.forwardRef !== 'undefined';
+
 function ContextProvider(name) {
-  var _childContextTypes, _ref2;
+  var _childContextTypes, _config;
 
   var contextName = makeContextName(name);
   var listenersKey = contextName + '/listeners';
   var eventIndexKey = contextName + '/eventIndex';
   var subscribeKey = contextName + '/subscribe';
 
-  return _ref2 = {
+  var config = (_config = {
     childContextTypes: (_childContextTypes = {}, _childContextTypes[contextName] = contextProviderShape.isRequired, _childContextTypes),
 
     getChildContext: function getChildContext() {
@@ -43,10 +49,16 @@ function ContextProvider(name) {
         subscribe: this[subscribeKey]
       }, _ref;
     },
+
+
+    // this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
     componentWillMount: function componentWillMount() {
       this[listenersKey] = [];
       this[eventIndexKey] = 0;
     },
+
+
+    // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
     componentWillReceiveProps: function componentWillReceiveProps() {
       this[eventIndexKey]++;
     },
@@ -57,7 +69,7 @@ function ContextProvider(name) {
         return listener(_this[eventIndexKey]);
       });
     }
-  }, _ref2[subscribeKey] = function (listener) {
+  }, _config[subscribeKey] = function (listener) {
     var _this2 = this;
 
     // No need to immediately call listener here.
@@ -68,28 +80,36 @@ function ContextProvider(name) {
         return item !== listener;
       });
     };
-  }, _ref2;
+  }, _config);
+
+  if (prefixUnsafeLifecycleMethods) {
+    config.UNSAFE_componentWillMount = config.componentWillMount;
+    config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps;
+    delete config.componentWillMount;
+    delete config.componentWillReceiveProps;
+  }
+  return config;
 }
 
 function ContextSubscriber(name) {
-  var _contextTypes, _ref4;
+  var _contextTypes, _config2;
 
   var contextName = makeContextName(name);
   var lastRenderedEventIndexKey = contextName + '/lastRenderedEventIndex';
   var handleContextUpdateKey = contextName + '/handleContextUpdate';
   var unsubscribeKey = contextName + '/unsubscribe';
 
-  return _ref4 = {
+  var config = (_config2 = {
     contextTypes: (_contextTypes = {}, _contextTypes[contextName] = contextProviderShape, _contextTypes),
 
     getInitialState: function getInitialState() {
-      var _ref3;
+      var _ref2;
 
       if (!this.context[contextName]) {
         return {};
       }
 
-      return _ref3 = {}, _ref3[lastRenderedEventIndexKey] = this.context[contextName].eventIndex, _ref3;
+      return _ref2 = {}, _ref2[lastRenderedEventIndexKey] = this.context[contextName].eventIndex, _ref2;
     },
     componentDidMount: function componentDidMount() {
       if (!this.context[contextName]) {
@@ -98,6 +118,9 @@ function ContextSubscriber(name) {
 
       this[unsubscribeKey] = this.context[contextName].subscribe(this[handleContextUpdateKey]);
     },
+
+
+    // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
     componentWillReceiveProps: function componentWillReceiveProps() {
       var _setState;
 
@@ -115,11 +138,17 @@ function ContextSubscriber(name) {
       this[unsubscribeKey]();
       this[unsubscribeKey] = null;
     }
-  }, _ref4[handleContextUpdateKey] = function (eventIndex) {
+  }, _config2[handleContextUpdateKey] = function (eventIndex) {
     if (eventIndex !== this.state[lastRenderedEventIndexKey]) {
       var _setState2;
 
       this.setState((_setState2 = {}, _setState2[lastRenderedEventIndexKey] = eventIndex, _setState2));
     }
-  }, _ref4;
+  }, _config2);
+
+  if (prefixUnsafeLifecycleMethods) {
+    config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps;
+    delete config.componentWillReceiveProps;
+  }
+  return config;
 }

package/lib/InternalPropTypes.js

@@ -19,7 +19,7 @@ var history = exports.history = (0, _propTypes.shape)({
   goForward: _propTypes.func.isRequired
 });
 
-var component = exports.component = (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string]);
+var component = exports.component = _propTypes.elementType;
 var components = exports.components = (0, _propTypes.oneOfType)([component, _propTypes.object]);
 var route = exports.route = (0, _propTypes.oneOfType)([_propTypes.object, _propTypes.element]);
 var routes = exports.routes = (0, _propTypes.oneOfType)([route, (0, _propTypes.arrayOf)(route)]);

package/lib/Link.js

@@ -73,7 +73,8 @@ var Link = (0, _createReactClass2.default)({
     activeClassName: _propTypes.string,
     onlyActiveOnIndex: _propTypes.bool.isRequired,
     onClick: _propTypes.func,
-    target: _propTypes.string
+    target: _propTypes.string,
+    innerRef: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.func, (0, _propTypes.shape)({ current: _propTypes.elementType })])
   },
 
   getDefaultProps: function getDefaultProps() {
@@ -107,7 +108,8 @@ var Link = (0, _createReactClass2.default)({
         activeClassName = _props.activeClassName,
         activeStyle = _props.activeStyle,
         onlyActiveOnIndex = _props.onlyActiveOnIndex,
-        props = _objectWithoutProperties(_props, ['to', 'activeClassName', 'activeStyle', 'onlyActiveOnIndex']);
+        innerRef = _props.innerRef,
+        props = _objectWithoutProperties(_props, ['to', 'activeClassName', 'activeStyle', 'onlyActiveOnIndex', 'innerRef']);
 
     // Ignore if rendered outside the context of router to simplify unit testing.
 
@@ -118,7 +120,7 @@ var Link = (0, _createReactClass2.default)({
     if (router) {
       // If user does not specify a `to` prop, return an empty anchor tag.
       if (!to) {
-        return _react2.default.createElement('a', props);
+        return _react2.default.createElement('a', _extends({}, props, { ref: innerRef }));
       }
 
       var toLocation = resolveToLocation(to, router);
@@ -139,7 +141,7 @@ var Link = (0, _createReactClass2.default)({
       }
     }
 
-    return _react2.default.createElement('a', _extends({}, props, { onClick: this.handleClick }));
+    return _react2.default.createElement('a', _extends({}, props, { onClick: this.handleClick, ref: innerRef }));
   }
 });
 

package/lib/Router.js

@@ -51,13 +51,16 @@ var propTypes = {
 
   // PRIVATE: For client-side rehydration of server match.
   matchContext: _propTypes.object
+};
 
-  /**
-   * A <Router> is a high-level API for automatically setting up
-   * a router that renders a <RouterContext> with all the props
-   * it needs each time the URL changes.
-   */
-};var Router = (0, _createReactClass2.default)({
+var prefixUnsafeLifecycleMethods = typeof _react2.default.forwardRef !== 'undefined';
+
+/**
+ * A <Router> is a high-level API for automatically setting up
+ * a router that renders a <RouterContext> with all the props
+ * it needs each time the URL changes.
+ */
+var Router = (0, _createReactClass2.default)({
   displayName: 'Router',
 
   propTypes: propTypes,
@@ -113,6 +116,9 @@ var propTypes = {
 
     return (0, _createTransitionManager3.default)(history, (0, _RouteUtils.createRoutes)(routes || children));
   },
+
+
+  // this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
   componentWillMount: function componentWillMount() {
     var _this = this;
 
@@ -132,6 +138,7 @@ var propTypes = {
   },
 
 
+  // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
   /* istanbul ignore next: sanity check */
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
     process.env.NODE_ENV !== 'production' ? (0, _routerWarning2.default)(nextProps.history === this.props.history, 'You cannot change <Router history>; it will be ignored') : void 0;
@@ -172,5 +179,12 @@ var propTypes = {
   }
 });
 
+if (prefixUnsafeLifecycleMethods) {
+  Router.prototype.UNSAFE_componentWillReceiveProps = Router.prototype.componentWillReceiveProps;
+  Router.prototype.UNSAFE_componentWillMount = Router.prototype.componentWillMount;
+  delete Router.prototype.componentWillReceiveProps;
+  delete Router.prototype.componentWillMount;
+}
+
 exports.default = Router;
 module.exports = exports['default'];

package/lib/RouterContext.js

@@ -14,6 +14,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactIs = require('react-is');
+
 var _createReactClass = require('create-react-class');
 
 var _createReactClass2 = _interopRequireDefault(_createReactClass);
@@ -102,7 +104,9 @@ var RouterContext = (0, _createReactClass2.default)({
           }
         }
 
-        if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) === 'object') {
+        // Handle components is object for { [name]: component } but not valid element
+        // type of react, such as React.memo, React.lazy and so on.
+        if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) === 'object' && !(0, _reactIs.isValidElementType)(components)) {
           var elements = {};
 
           for (var key in components) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "3.2.1",
+  "version": "3.2.5",
   "description": "A complete routing library for React",
   "files": [
     "*.md",
@@ -22,6 +22,7 @@
     "build-umd": "cross-env NODE_ENV=development webpack modules/index.js umd/ReactRouter.js",
     "build-min": "cross-env NODE_ENV=production webpack -p modules/index.js umd/ReactRouter.min.js",
     "lint": "eslint examples modules scripts tools *.js",
+    "prepublishOnly": "node ./scripts/build.js",
     "start": "node examples/server.js",
     "test": "npm run lint && npm run test-node && npm run test-browser",
     "test-browser": "cross-env NODE_ENV=test karma start",
@@ -38,7 +39,8 @@
     "hoist-non-react-statics": "^2.3.1",
     "invariant": "^2.2.1",
     "loose-envify": "^1.2.0",
-    "prop-types": "^15.5.6",
+    "prop-types": "^15.7.2",
+    "react-is": "^16.8.6",
     "warning": "^3.0.0"
   },
   "peerDependencies": {
@@ -68,7 +70,7 @@
     "express": "^4.14.0",
     "express-urlrewrite": "^1.2.0",
     "gzip-size": "^4.1.0",
-    "karma": "^2.0.0",
+    "karma": "^4.1.0",
     "karma-browserstack-launcher": "^1.0.1",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",
@@ -79,9 +81,9 @@
     "mocha": "^5.0.4",
     "pretty-bytes": "^4.0.2",
     "qs": "^6.2.1",
-    "react": "^16.0.0-rc",
+    "react": "^16.9.0",
     "react-addons-css-transition-group": "^15.6.0",
-    "react-dom": "^16.0.0-rc",
+    "react-dom": "^16.9.0",
     "rimraf": "^2.5.4",
     "style-loader": "^0.16.1",
     "webpack": "^1.13.1",