diff --git a/UPGRADE_GUIDE.md b/UPGRADE_GUIDE.md
index 6d679ff66b..53f6d192f9 100644
--- a/UPGRADE_GUIDE.md
+++ b/UPGRADE_GUIDE.md
@@ -8,6 +8,22 @@ they refer to.
0.5.x -> 0.6.x
--------------
+### Link params
+
+Links should now pass their params in the `params` property, though the
+old behavior will still work, you should update your code soon because
+it will be removed by `v1.0`
+
+```js
+// 0.5.x
+
+
+// 0.6.x
+
+```
+
+### Dynamic Segments, keys, and lifecycle methods
+
If you have dynamic segments and are depending on `getInitialState`,
`componentWillMount`, or `componentDidMount` to fire between transitions
to the same route--like `users/123` and `users/456`, then you have two
diff --git a/docs/api/components/Link.md b/docs/api/components/Link.md
index ba86977208..9c5bfd127c 100644
--- a/docs/api/components/Link.md
+++ b/docs/api/components/Link.md
@@ -12,16 +12,28 @@ Props
The name of the route to link to, or a full URL.
+### `params`
+
+Object, the parameters to fill in the dynamic segments of your route.
+
+#### Example
+
+```js
+// given a route config like this
+
+
+// create a link with this
+
+
+// though, if your user properties match up to the dynamic segements:
+
+```
+
### `query`
Object, Query parameters to add to the link. Access query parameters in
your route handler with `this.props.query`.
-### `[param]`
-
-Any dynamic segments the route defines (like `:userId`) are passed by
-name through the link's properties to the resulting url.
-
### `activeClassName`
The className a `Link` receives when it's route is active. Defaults to
@@ -44,7 +56,7 @@ Example
Given a route like ``:
```xml
-{user.name}
+{user.name}
Michael
@@ -54,6 +66,6 @@ active -->
{user.name}
-{user.name}
+{user.name}
```
diff --git a/examples/animations/app.js b/examples/animations/app.js
index 4ecf244722..964cd23de9 100644
--- a/examples/animations/app.js
+++ b/examples/animations/app.js
@@ -11,8 +11,8 @@ var App = React.createClass({
return (
-
Kitten
-
Cage
+
Kitten
+
Cage
{this.props.activeRouteHandler()}
diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js
index 26343d4783..3cd7125030 100644
--- a/examples/data-flow/app.js
+++ b/examples/data-flow/app.js
@@ -33,7 +33,7 @@ var App = React.createClass({
render: function() {
var links = this.state.tacos.map(function(taco) {
- return
diff --git a/modules/components/Link.js b/modules/components/Link.js
index 3c044db07f..52b7eb391b 100644
--- a/modules/components/Link.js
+++ b/modules/components/Link.js
@@ -4,6 +4,7 @@ var withoutProperties = require('../helpers/withoutProperties');
var transitionTo = require('../helpers/transitionTo');
var hasOwnProperty = require('../helpers/hasOwnProperty');
var makeHref = require('../helpers/makeHref');
+var warning = require('react/lib/warning');
function isLeftClickEvent(event) {
return event.button === 0;
@@ -14,7 +15,7 @@ function isModifiedEvent(event) {
}
/**
- * A map of component props that are reserved for use by the
+ * DEPRECATED: A map of component props that are reserved for use by the
* router and/or React. All other props are used as params that are
* interpolated into the link's path.
*/
@@ -38,12 +39,12 @@ var RESERVED_PROPS = {
*
* You could use the following component to link to that route:
*
- *
+ *
*
* In addition to params, links may pass along query string parameters
* using the `query` prop.
*
- *
+ *
*/
var Link = React.createClass({
@@ -53,8 +54,21 @@ var Link = React.createClass({
statics: {
+ // TODO: Deprecate passing props as params in v1.0
getUnreservedProps: function (props) {
+ warning(
+ false,
+ 'Passing props for params on s is deprecated, '+
+ 'please use the `params` property.'
+ );
return withoutProperties(props, RESERVED_PROPS);
+ },
+
+ /**
+ * Returns a hash of URL parameters to use in this 's path.
+ */
+ getParams: function (props) {
+ return props.params || Link.getUnreservedProps(props);
}
},
@@ -62,6 +76,7 @@ var Link = React.createClass({
propTypes: {
to: React.PropTypes.string.isRequired,
activeClassName: React.PropTypes.string.isRequired,
+ params: React.PropTypes.object,
query: React.PropTypes.object,
onClick: React.PropTypes.func
},
@@ -78,18 +93,11 @@ var Link = React.createClass({
};
},
- /**
- * Returns a hash of URL parameters to use in this 's path.
- */
- getParams: function () {
- return Link.getUnreservedProps(this.props);
- },
-
/**
* Returns the value of the "href" attribute to use on the DOM element.
*/
getHref: function () {
- return makeHref(this.props.to, this.getParams(), this.props.query);
+ return makeHref(this.props.to, Link.getParams(this.props), this.props.query);
},
/**
@@ -106,7 +114,7 @@ var Link = React.createClass({
},
componentWillReceiveProps: function (nextProps) {
- var params = Link.getUnreservedProps(nextProps);
+ var params = Link.getParams(nextProps);
this.setState({
isActive: Link.isActive(nextProps.to, params, nextProps.query)
@@ -115,7 +123,7 @@ var Link = React.createClass({
updateActiveState: function () {
this.setState({
- isActive: Link.isActive(this.props.to, this.getParams(), this.props.query)
+ isActive: Link.isActive(this.props.to, Link.getParams(this.props), this.props.query)
});
},
@@ -135,7 +143,7 @@ var Link = React.createClass({
event.preventDefault();
if (allowTransition)
- transitionTo(this.props.to, this.getParams(), this.props.query);
+ transitionTo(this.props.to, Link.getParams(this.props), this.props.query);
},
render: function () {