Passing Props to React-Router 4.0.0 Children Routes
<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>