title: Passing parameter to Route in React Router
body: <p>I have defined a route which cannot be accessed unless the user has logged in. The code for this is as follows:</p>
  
  <pre><code>    const App = ({ userLoggedIn }) =&gt; {
  return (
          &lt;Router&gt;
            &lt;div className="App"&gt;
              &lt;Header userLoggedIn={ userLoggedIn }/&gt;
              &lt;ProtectedRoute path='/content' component={ Day } userLoggedIn={ userLoggedIn } /&gt;
              &lt;Footer /&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        );
      }
  </code></pre>
  
  <p>I am passing the userLoggedIn as parameter as the App is keeping the state of it. I am defining ProtectedRoute in a similar way as the Auth example in React Router documentation.</p>
  
  <pre><code>const ProtectedRoute = ({ userLoggedIn, component, ...rest }) =&gt; (
    &lt;Route {...rest} render={ props =&gt; (
      userLoggedIn ? (
        React.createElement(component, props)
      ) : (
        &lt;Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }}/&gt;
      )
    )}/&gt;
  )
  </code></pre>
  
  <p>But userLoggedIn is always null (even when the value is not null before calling the ProtectedRoute).</p>
  
  <hr>
  
  <p>I have created a simpler example which I'm testing in the App. I have added the following line:</p>
  
  <pre><code>&lt;TestRoute path='/test' userLoggedIn={ userLoggedIn }/&gt;
  </code></pre>
  
  <p>And created the <code>TestRoute</code> component as follows:</p>
  
  <pre><code>    const TestRoute = ({ userLoggedIn }) =&gt; {
    console.log(userLoggedIn);
    return (
      &lt;Redirect to={{
        pathname: userLoggedIn ? '/yes' : '/no'
      }}/&gt;
    )
  }
  </code></pre>
  
  <p>What I see now is than in the console appears <code>null</code> twice and then the real value for <code>userLoggedIn</code>... I guess the first time the component receives the <code>null</code> redirects to <code>/no</code> so when the real value "arrives" it doesn't go to <code>/yes</code> as it should...</p>
  
  <hr>
  
  <p>How can I access the userLoggedIn param I'm passing? Does anyone has a similar example?</p>
  
  <p>Thanks</p>