title: Send props to react router component from parent layout component
body: <p>I have created a layout component called <code>Main</code> which sends user prop to its children component using <code>React.cloneElement(children, { user: 'First Name'})</code>, but unable to pass that user prop to Route component.</p>
  
  <blockquote>
    <p>index.js</p>
  </blockquote>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { BrowserRouter as Router, Route } from "react-router-dom";
  import Main from "./Main.jsx";
  import Home from "./Home.jsx";
  
  const App = () =&gt; (
    &lt;Router&gt;
      &lt;Main&gt;
        &lt;Route
          path="/"
          render={props =&gt; {
            return &lt;Home {...props} /&gt;;
          }}
        /&gt;
      &lt;/Main&gt;
    &lt;/Router&gt;
  );
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <blockquote>
    <p>Main.jsx</p>
  </blockquote>
  
  <pre><code>import React from "react";
  
  export default props =&gt; {
    return &lt;div&gt;{React.cloneElement(props.children, { user: "Username" })}&lt;/div&gt;;
  };
  </code></pre>
  
  <blockquote>
    <p>Home.jsx</p>
  </blockquote>
  
  <pre><code>import React from "react";
  
  export default props =&gt; {
    const { user } = props;
    return &lt;div&gt;User - {user}&lt;/div&gt;;
  };
  </code></pre>
  
  <p>But unable to get <code>user</code> prop in <code>Home</code> component. If I do not use <code>Route</code> then it gets passed to <code>Home</code>.</p>
  
  <p>When I do this, then <code>Home</code> receives <code>user</code> prop.</p>
  
  <pre><code>&lt;Main&gt;
     &lt;Home /&gt;
  &lt;/Main&gt;
  </code></pre>
  
  <p>How can I get <code>user</code> prop and send it to component rendered by <code>Route</code>?</p>
  
  <p>Codesandox link of the scenario - <a href="https://codesandbox.io/s/kmyrj0zr8o" rel="nofollow noreferrer">https://codesandbox.io/s/kmyrj0zr8o</a></p>