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
  • {taco.name}
  • + return
  • {taco.name}
  • }); return (
    diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js index 9792ce0e91..79b38b1501 100644 --- a/examples/dynamic-segments/app.js +++ b/examples/dynamic-segments/app.js @@ -11,8 +11,8 @@ var App = React.createClass({ return (
      -
    • Bob
    • -
    • Sally
    • +
    • Bob
    • +
    • Sally
    {this.props.activeRouteHandler()}
    @@ -26,8 +26,8 @@ var User = React.createClass({

    User id: {this.props.params.userId}

      -
    • foo task
    • -
    • bar task
    • +
    • foo task
    • +
    • bar task
    {this.props.activeRouteHandler()}
    diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js index 78ce16eba2..e6f1cbc289 100644 --- a/examples/master-detail/app.js +++ b/examples/master-detail/app.js @@ -105,7 +105,7 @@ var App = React.createClass({ render: function() { var contacts = this.state.contacts.map(function(contact) { - return
  • {contact.first}
  • + return
  • {contact.first}
  • }); return (
    diff --git a/examples/query-params/app.js b/examples/query-params/app.js index 4011ef7ec1..7e3bcdf034 100644 --- a/examples/query-params/app.js +++ b/examples/query-params/app.js @@ -10,9 +10,9 @@ var App = React.createClass({ return (
      -
    • Bob
    • -
    • Bob With Query Params
    • -
    • Sally
    • +
    • Bob
    • +
    • Bob With Query Params
    • +
    • Sally
    {this.props.activeRouteHandler()}
    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 () {