title: How to fetch object from redux store in parent route and make it available to child routes?
body: <p>I'm using React, Redux and React Router with nested routes. Say, I have the following route declaration and (container) components:</p>
  
  <h2>Routes</h2>
  
  <pre><code>&lt;Route path="/" component={App}&gt;
      &lt;Route path="/parts"&gt;
          &lt;Route path=":partId" component={Part}&gt;
              &lt;Route path="edit" component={EditPart}/&gt;
          &lt;/Route&gt;
      &lt;/Route&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <h2>Part</h2>
  
  <pre><code>const Part = ({ part, children }) =&gt; (
      &lt;div&gt;
          &lt;h1&gt;{part.title}&lt;/h1&gt;
          {children}
      &lt;/div&gt;
  )
  
  const mapStateToProps = (state, props) =&gt; state.parts.find(part =&gt; part.id === props.params.partId)
  
  export default connect(
      mapStateToProps
  )(Part)
  </code></pre>
  
  <p>What's the best way to avoid repeating the steps taken in Part's <code>mapStateToProps()</code> function in the child component <code>EditPart</code> to get at the part object? Is there a way to pass the full object down from <code>Part</code> to <code>EditPart</code>? </p>
  
  <p>Somebody suggested using <code>React.children</code> and <code>React.createElement()</code> in the parent component to override the props passed to its children, but I believe this isn't the cleanest approach. </p>
  
  <p>Or do you think it's okay to refetch the object by its id (probably multiple times) in child routes? Maybe react-router's onEnter hook could help? </p>
  
  <p>I feel I'm missing some key piece of the puzzle to handle this in a sensible way... Thanks for enlightening me! :)</p>