title: Objects are not valid as a React child using react router v4
body: <p>This is my wrapper component aka auth component to allow only authed user to access.</p>
  
  <p><strong>Auth.js</strong></p>
  
  <pre><code>render() {
      const { Component: component, ...rest } = this.props;
  
      return (
        &lt;Route&gt;
          {rest}
          render={props =&gt;
            this.isAuth === true ? (
              &lt;Component {...props} /&gt;
            ) : (
              &lt;Redirect
                to={{
                  pathname: "/login"
                }}
              /&gt;
            )
          }
        &lt;/Route&gt;
      );
    }
  </code></pre>
  
  <p>What's wrong with it? Here's my route declaration</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>render(
    &lt;BrowserRouter&gt;
      &lt;div className="App"&gt;
        &lt;Switch&gt;
          &lt;Route path="/login" component={Login} /&gt;
          &lt;Auth path="/dashboard" component={Dashboard} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById("root")
  );
  </code></pre>
  
  <p>I've made a demo to reproduce the problem here
  <a href="https://codesandbox.io/s/5xm202p1j4" rel="nofollow noreferrer">https://codesandbox.io/s/5xm202p1j4</a></p>
  
  <p>I used the same concept in the official doc, <a href="https://reacttraining.com/react-router/web/example/auth-workflow" rel="nofollow noreferrer">https://reacttraining.com/react-router/web/example/auth-workflow</a> just that instead of making the auth.js a pure function I make it a class base container so that I can call api or check the token of the user exist or not in my localstorage, what's the problem exactly?</p>