title: React Router / Redux / HOC not working with 'render' prop
body: <p>I am using react router v4 and I'm trying to wrap my head around a react-router / redux / HOC related issue. I have a higher order component working. The HOC itself is <code>connect()</code>-ed to redux store. This approach works perfectly if I wire it up in a <code>&lt;Route /&gt;</code> via a <code>component</code> prop: <code>&lt;Route path="/profile" component={ withAuth(Profile) } /&gt;</code> does work.</p>
  
  <p>However, when I try to do the same with a <code>&lt;Route /&gt;</code> and a render prop it does <em>not</em> work: <code>&lt;Route path="/profile" render={ () =&gt; withAuth(Profile) } /&gt;</code> The console throws "<code>Route.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.</code>" It does work when I omit the HOC: <code>&lt;Route path="/profile" render={ () =&gt; &lt;Profile /&gt; } /&gt;</code> so I suspect a problem with the HOC but I can't find it.</p>
  
  <p>The reason I'm trying to use <code>render</code> is I'd like to pass additional props to the HOC. Besides it bugs me that I can't find the bug.</p>
  
  <p>Can anybody with a fresh eye have a look and put me on the right path? Thanks!</p>
  
  <pre><code>/* === app.js === */
  
  import React, { Component } from 'react';
  import { Route } from 'react-router-dom';
  import { Provider } from 'react-redux';
  
  import Header from './header';
  import Home from './home';
  import Content from './about';
  import Profile from './profile';
  import withAuth from './withAuth';
  
  import store from '../reducers/store';
  
  export default class App extends Component {
      render() {
          return (
              &lt;Provider store={store}&gt;
                  &lt;div className="mdl-grid"&gt;
                      &lt;Header /&gt;
                      &lt;main className="mdl-layout__content"&gt;
                          &lt;div className="page-content"&gt;
                              &lt;Route path="/" exact component={Home} /&gt;
                              &lt;Route path="/about" component={Content} /&gt;
                              &lt;Route path="/profile" render={ () =&gt; withAuth(Profile) } /&gt;
                          &lt;/div&gt;
                      &lt;/main&gt;
                  &lt;/div&gt;
              &lt;/Provider&gt;
          )
      }
  }
  
  
  
  /* === withAuth.js (Higher order component) === */
  
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Redirect } from 'react-router-dom';
  
  const HOC = WrappedComponent =&gt; {
      return class extends Component {
          render() {
              if (this.props.auth) {
                  return &lt;WrappedComponent authenticated={this.props.auth} {...this.props} /&gt;
              } else {
                  return &lt;Redirect to="/" /&gt;
              }
          }
      }
  }
  
  function mapStateToProps({ auth }) {
      return { auth };
  }
  
  export default WrappedComponent =&gt; connect(mapStateToProps)( HOC(WrappedComponent) );
  </code></pre>