diff --git a/docs/API.md b/docs/API.md index 3a0e0ccc93..95dd5ee462 100644 --- a/docs/API.md +++ b/docs/API.md @@ -512,9 +512,6 @@ The dynamic segments of the URL. #### `route` The route that rendered this component. -#### `routeParams` -A subset of `this.props.params` that were directly specified in this component's route. For example, if the route's path is `users/:userId` and the URL is `/users/123/portfolios/345` then `this.props.routeParams` will be `{userId: '123'}`, and `this.props.params` will be `{userId: '123', portfolioId: 345}`. - #### `children` The matched child route element to be rendered. If the route has [named components](/docs/API.md#named-components) then this will be undefined, and the components will instead be available as direct properties on `this.props`. @@ -543,6 +540,8 @@ class App extends React.Component { #### `history` (deprecated) +#### `routeParams` (deprecated) + ### Named Components When a route has one or more named components, the child elements are available by name on `this.props`. In this case `this.props.children` will be undefined. All route components can participate in the nesting. diff --git a/modules/RouterContext.js b/modules/RouterContext.js index e5a90ae912..1a08a36cd5 100644 --- a/modules/RouterContext.js +++ b/modules/RouterContext.js @@ -69,7 +69,12 @@ const RouterContext = React.createClass({ return element // Don't create new children; use the grandchildren. const route = routes[index] - const routeParams = getRouteParams(route, params) + + let routeParams = getRouteParams(route, params) + if (__DEV__) { + routeParams = deprecateObjectProperties(routeParams, '`routeParams` is deprecated. Use `params` instead.') + } + const props = { history, location, diff --git a/modules/__tests__/Router-test.js b/modules/__tests__/Router-test.js index 75e152ff2e..b1bca5141a 100644 --- a/modules/__tests__/Router-test.js +++ b/modules/__tests__/Router-test.js @@ -83,6 +83,44 @@ describe('Router', function () { }) }) + it('passes params to route components', function (done) { + function MyComponent({ params }) { + return