title: Values not being passed properly to a function
body: <p>I am relatively new to react, so this might be a simple issue.  And apologize in advance if the title is not accurate. </p>
  
  <p>I am trying to do a protected route with react-router-dom.  I thought that I had code correct, but for some reason, probably an ID-10-T error on my part, when a user is logged in and PrivateRoute is called the auth information is not being passed correctly.  Below is my code and a snip of the console log when /dashboard route is hit.  </p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios'
  
  import {
    BrowserRouter as Router,
    Route,
    Redirect,
    Switch
  } from "react-router-dom";
  
  import './App.css';
  
  import Dashboard from "./pages/Dashboard";
  import Home from "./pages/Home";
  import NoMatch from "./pages/NoMatch";
  import Signin from "./pages/Signin";
  import Signup from "./pages/Signup";
  
  class App extends Component {
    constructor(props) {
      super()
      this.state = {
        isAuthenticated: null,
        loggedIn: false,
        username: null
      }
  
      this.getUser = this.getUser.bind(this)
      this.componentWillMount = this.componentWillMount.bind(this)
    }
  
    componentWillMount() {
      this.getUser()
    }
  
    getUser() {
      axios.get('/api/auth/user')
        .then(res =&gt; {
          console.log('Get user response: ')
          console.log(res.data)
          if (res.data.user) {
            console.log('Get User: There is a user saved in the server session: ')
            console.log(res.data.user)
            this.setState({
              isAuthenticated: true,
              loggedIn: true,
              username: res.data.user.username
            })
            console.log("this.state.isAuthenticated value:")
            console.log(this.state.isAuthenticated)
          } else {
            console.log('Get user: no user');
            this.setState({
              isAuthenticated: false,
              loggedIn: false,
              username: null
            })
            console.log("this.state.isAuthenticated value:")
            console.log(this.state.isAuthenticated)
          }
        })
        .catch((err) =&gt; {
          console.log('Error fetching authorized user.');
          console.log(err)
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Router&gt;
            &lt;div&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/" component={Home} /&gt;
                &lt;Route exact path="/signin" component={Signin} /&gt;
                &lt;Route exact path="/signup" component={Signup} /&gt;
                &lt;PrivateRoute
                  authed={this.state.isAuthenticated}
                  path="/dashboard"
                  component={Dashboard} /&gt;
                &lt;Route component={NoMatch} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  function PrivateRoute({ component: Component, authed, ...rest }) {
    console.log("PrivateRoute")
    console.log("authed value:")
    console.log(authed)
    return (
      &lt;Route
        {...rest}
        render={(props) =&gt; (authed === true)
          ? (&lt;Component {...props} /&gt;)
          : (&lt;Redirect
            to={{
              pathname: '/signin',
              state: { from: props.location }
            }}
          /&gt;)}
      /&gt;
    )
  }
  
  export default App;
  </code></pre>
  
  <p>Console output:</p>
  
  <pre><code>PrivateRoute
  authed value:
  null
  Get user response: 
  {user: {…}}
  Get User: There is a user saved in the server session: 
  {id: 1, firstname: "xxxx", lastname: "xxxx", username: "xxxx", email: "xxxx@xxxx.com", …}
  this.state.isAuthenticated value:
  true
  </code></pre>
  
  <p>It appears that PrivateRoute is getting processed before componentWillMount, but I'm not sure how to prevent this.</p>
  
  <p>Any help would be appreciated.</p>