title: Passing Props to React-Router 4.0.0 Children Routes
body: <p>I'm trying to migrate an existing react-router 3.0.0 app to <a href="https://github.com/ReactTraining/react-router/tree/v4" rel="nofollow noreferrer">4.0.0</a>. Within the router, I need pass an additional non routing-related <code>prop</code> to its children.</p>
  
  <p>There are a few somewhat hacky ways to accomplish this in previous versions of react-router, <a href="https://stackoverflow.com/q/31862839/1179207">detailed in this post</a>. My personal favorite was <a href="https://stackoverflow.com/a/37215523/1179207">this method</a> using <code>cloneElement</code>, since it ensured that all of the react-router props were copied over as well:</p>
  
  <pre><code>// react-router 3.0.0 index.js JSX
  &lt;Router history={browserHistory}
    &lt;Route path="/" component={App}&gt;
      &lt;Route path="/user/:userId" component={User} /&gt;
      &lt;IndexRoute component={Home} /&gt;
    &lt;/Route&gt;
  &lt;/Routes&gt;
  
  // App component JSX (uses cloneElement to add a prop)
  &lt;div className="App"&gt;
    { cloneElement(props.children, { appState: value }) }
  &lt;/div&gt;
  </code></pre>
  
  <p>So far my new App component looks like:</p>
  
  <pre><code>// react-router 4.0.0 App component JSX (moved routing code out of index.js and into here)
  &lt;BrowserRouter&gt;
    &lt;div className="App"&gt;
      &lt;Match exactly pattern="/" component={Home} /&gt;
      &lt;Match pattern="/user/:userId" component={User} /&gt;
      &lt;Miss component={Home} /&gt;
    &lt;/div&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>What's the best way to add the <code>appState</code> prop to each of the <code>Match</code>'s components while retaining the provided router props?</p>