title: React router 1.0 pass multiple props to children routes
body: <p>I'm using react-router 1.0 and react-redux on an app, and I'm wondering what strategy is best to pass props to children on larger apps. Here's a basic situation:</p>
  
  <p>Let's say I have a route <code>/admin/users/edit/:id</code> with the following structure on its components:</p>
  
  <p>Routes:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>&lt;Router&gt;
    &lt;Route path="admin" component={Admin}&gt;
      &lt;Route path="users" component={Users}&gt;
        &lt;Route path="edit/:id" component={Edit}/&gt;
      &lt;/Route&gt;
    &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>Admin:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>class Admin extends React.Component {
  
    render() {
      return (
        {this.props.children}
      )
    }
  }
  </code></pre>
  
  <p>Users:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>class User extends React.Component {
  
    edit = (id, params) =&gt; {
      const { dispatch } this.props;
      dispatch(edit(id, params));
    } 
  
    other functions (add, remove) ...
  
    render() {
      return (
        {this.props.children}
      )
    }
  }
  
  function mapStateToProps(state) {
    const { users } = state;
    return { users };
  }
  
  export default connect(mapStateToProps)(User);
  </code></pre>
  
  <p>Edit:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>class Edit extends React.Component {
  
    submit () =&gt; {
      const { id } = this.props.params;
      const { firstName } = this.refs;
      this.props.edit(id, {firstName: firstName.value});
    }
  
    render() {
      const { id } = this.props.params;
      const user = this.props.users[id];
      return (
         &lt;form&gt;
           &lt;input ref='firstName' defaultValue={user.firstName}/&gt;
           &lt;button onClick={this.submit}&gt;Submit&lt;/button&gt;
         &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>How would I pass the users &amp; edit function props down to the children?</p>
  
  <p>I know about <code>React.cloneElement()</code> (as in <a href="https://github.com/rackt/react-router/tree/master/examples/passing-props-to-children" rel="nofollow">https://github.com/rackt/react-router/tree/master/examples/passing-props-to-children</a>), but if I have multiple routes like <code>/users/add</code>, <code>/users/remove/:id</code>, etc, I would be passing and exposing all the functions (edit, add, remove...) to all children. That solution doesn't seem to work very well when you have more than one children.</p>
  
  <p>I would like to keep my children as dumb as possible, and use this same structure across the application (<code>/images/add</code>, <code>/images/remove/:id</code>, etc).</p>
  
  <p>Any suggestions? </p>