title: Pass props through a higher order component from a Route
body: <p>I have a problem with my Higher Order Component. I am trying to pass props from a <code>&lt;Layout /&gt;</code> component down a route (React Router v4). The components specified in the routes are wrapped by a HOC, but the props that I pass never reaches the component. </p>
  
  <p>Also, I can't use the HOC without using <code>export default () =&gt; MyHOC(MyComponent)</code>. I can't figure out why, but that might have something to do with it?</p>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>const Layout = ({ location, initialData, routeData, authenticateUser }) =&gt; (
    &lt;Wrapper&gt;
      &lt;Container&gt;
          &lt;Switch&gt;
            // how do I get these props passed through the HOC? render instead of component made no difference.
            &lt;Route exact path="/pages/page-one" component={() =&gt; &lt;PageOne routeData={routeData} title="PageOne" /&gt;} /&gt;
            &lt;Route exact path="/pages/page-two" component={() =&gt; &lt;PageTwo routeData={routeData} title="PageTwo" /&gt;} /&gt;
            &lt;Route component={NotFound} /&gt;
          &lt;/Switch&gt;
      &lt;/Container&gt;
    &lt;/Wrapper&gt;
  )
  
  export default Layout
  </code></pre>
  
  <p><strong>Page.js</strong></p>
  
  <pre><code>// I've tried swapping to (WrappedComponent) =&gt; (props) without success
  const Page = (props) =&gt; (WrappedComponent) =&gt; {
   const renderHeader = props.header
     ? &lt;Header title={props.headerTitle} /&gt;
     : false
   return (
     &lt;Wrapper&gt;
       {renderHeader}
       &lt;Container withHeader={props.header}&gt;
         &lt;WrappedComponent /&gt;
       &lt;/Container&gt;
     &lt;/Wrapper&gt;
   )
  }
  
  export default Page
  </code></pre>
  
  <p><strong>PageOne.js</strong></p>
  
  <pre><code>class PageOne extends React.Component {
    render() {
      return (
        &lt;Content&gt;
          &lt;Title&gt;{this.props.title}&lt;/Title&gt; // &lt;----- not working!
          {JSON.stringify(this.props.routeData, null, 4)} // &lt;---- not working!
        &lt;/Content&gt;
      )
    }
  }
  
  export default () =&gt; Page({ header: true, headerTitle: 'header title' })(PageOne)
  
  // does not work without () =&gt; Page
  // when using just export default Page I get the "Invariant Violation: Element type is invalid: 
  // expected a string (for built-in components) or a class/function (for composite components)
  // but got: object. Check the render method of Route." error.
  </code></pre>