title: how to pass props to Link(ed) to react-router components
body: <p>Every React app  I've made (which is actually only one small one) uses the <code>actions up, data down</code> approach, where (as I understand it) components receive data from parent components by calling <code>this.props.somePropertyName</code>. I'm now trying out react-router <a href="https://github.com/rackt/react-router/tree/master/examples" rel="nofollow noreferrer">and none of the examples given</a> seem to have child components receive data via <code>props</code> and, from what I can see, there's no easy to pass props to child components (other than the <code>&lt;RouteHandler/&gt;</code>. In the example below, I pass an endpoint to the HomePage component from the App. In the HomePage component, I get the data (a list of blog posts) and wish to pass individual post to the PostDetail component (as a prop) but I can't do it. I don't want to pass all the data using react-router "params" because whatever gets passed as in params ends up in the url. </p>
  
  <p>Question: In the code below, how do I pass data to the linked to PostDetail components, so I can call things like <code>this.props.postBody</code> in the PostDetail component?</p>
  
  <pre><code>var App = React.createClass({
      render: function(){
          return (
              &lt;div&gt;
                &lt;RouteHandler source="/my-api-data-source/"/&gt;
              &lt;/div&gt;
           )
      }
  })
  
  var routes = (
      &lt;Route name="main path="/" handler={App}&gt;
        &lt;DefaultRoute name="homepage" handler={HomePage}&gt;
        &lt;Route name="post" path=":postId" hander={PostDetail}&gt;
      &lt;/Route&gt;
  
  )
  
  var HomeComponent = React.createClass({
      componentDidMount: function(){
          $.get(this.props.source, function (result){
              if(this.isMounted()){
                  this.setState({
                      posts: result
                   })
               }
           }
      }
      render: function(){
          return (
             //code omitted --I loop through posts array to create a list of links to posts like this
              &lt;ul&gt;
                  &lt;li&gt;Link to "post" params={postId: somePostId}&gt;post.title&lt;/li&gt;
                  &lt;li&gt;Link to "post" params={postId: somePostId}&gt;post.title&lt;/li&gt;
                  &lt;li&gt;Link to "post" params={postId: somePostId}&gt;post.title&lt;/li&gt;
              &lt;/ul&gt;
  
           )
      }
  })
  </code></pre>
  
  <p>Question: how do I pass data to the linked to PostDetail components, so I can call things like <code>this.props.postBody</code> in the PostDetail component? (Also, imagine that I had several different routes and wanted to pass different props to different routes)</p>
  
  <pre><code>var PostDetail = React.createClass({
  
  
      render: function(){
             return (
               &lt;div&gt;
                      &lt;h2&gt;want to call `this.props.title` here &lt;/h2&gt;
                       want to call `this.props.postBody` here 
                       want to call `this.props.postComments` here etc
               &lt;/div&gt;
             )
      }
  )}
  </code></pre>
  
  <p>Note, my question is not a duplicate of <a href="https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component?rq=1">this question</a> as the <code>props</code> in my question are coming from the HomePage route i.e. I can't wrap the PageDetail component with the HomePage component as a way to pass the props from HomePage to PageDetail (as is suggested by the SO answer I linked to)</p>