diff --git a/modules/components/Routes.js b/modules/components/Routes.js index db6df0b4b2..06cae7bd2f 100644 --- a/modules/components/Routes.js +++ b/modules/components/Routes.js @@ -30,7 +30,7 @@ function findMatches(path, routes, defaultRoute, notFoundRoute) { if (matches != null) { var rootParams = getRootMatch(matches).params; - + params = route.props.paramNames.reduce(function (params, paramName) { params[paramName] = rootParams[paramName]; return params; @@ -225,7 +225,21 @@ function returnNull() { return null; } -function computeHandlerProps(matches, query) { +function computeHandlerProps(matches, query, userSuppliedHandlerProps) { + /** + * In the tree: + * + * + * + * + * + * + * + * + * + * `computeHandlerProps` constructs the `props` that get passed into . + */ + var handler = returnNull; var props = { ref: null, @@ -235,10 +249,26 @@ function computeHandlerProps(matches, query) { key: null }; + /** + * Recursively passes `handler`s down the tree, effectively creating: + * + * null + * }/> + * }/> + * }/> + */ reversedArray(matches).forEach(function (match) { var route = match.route; + // DEPRECATED (unreserved props) props = Route.getUnreservedProps(route.props); + // TODO: remove the above line and move the following line + // into the parent scope (below `var props`) + props = copyProperties(props, userSuppliedHandlerProps); + props.ref = '__activeRoute__'; props.params = match.params; @@ -412,7 +442,7 @@ var Routes = React.createClass({ * Returns the props that should be used for the top-level route handler. */ getHandlerProps: function () { - return computeHandlerProps(this.state.matches, this.state.activeQuery); + return computeHandlerProps(this.state.matches, this.state.activeQuery, this.props.handlerProps); }, /** diff --git a/modules/components/__tests__/Routes-test.js b/modules/components/__tests__/Routes-test.js index ac647c5b30..59f86c5da1 100644 --- a/modules/components/__tests__/Routes-test.js +++ b/modules/components/__tests__/Routes-test.js @@ -69,4 +69,31 @@ describe('A Routes', function () { }); }); + describe('with `handlerProps`', function () { + var component; + var expectedResult = "passed in from handlerProps"; + + + beforeEach(function () { + component = ReactTestUtils.renderIntoDocument( + Routes({ handlerProps: { echo: expectedResult } }, + Route({ handler: NullHandler }, + Route({ handler: NullHandler }) + ) + ) + ); + }); + + afterEach(function () { + React.unmountComponentAtNode(component.getDOMNode()); + }); + + it('returns an array with the correct params', function () { + // component.props gives you 's props + // component.render().props appears to give you the deepest child's props + // this is my first time unit testing a React component, + // so please show me the right way to do this. =) + expect(component.render().props.echo).toEqual(expectedResult); + }); + }); });