title: React: Conditionally render a component in a route based on login status, without showing loading page
body: <p>I'm trying to conditionally render a component based on login status. I click a link from a separate component to take me to home (The '/' route). If logged in, I'd like this to take me straight to the 'Logged In' home, and if not, take me to the 'Logged Out' home.</p>
  
  <p>The problem with the loading page is it's quite clunky. The rest of the app loads instantly. The ability to go straight to 'home' in some app without having a loading page seems like it should be easy to achieve? Possible solutions could be:</p>
  
  <ul>
  <li>Conditionally rendering a route at some point, instead of a component under a route</li>
  <li>Displaying the last rendered component until data is retrieved, instead of a loading page.</li>
  </ul>
  
  <p>EDIT: I'd like the '/' route to show either HomeLoggedIn or HomeLoggedOut but not redirect to another route, so that the url is the same for both components.</p>
  
  <p>Current code with Loading page is below.</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends Component {
      constructor(props) {
          super(props);
          this.state = {
              loading: true,
              auth: false
          };
      }
      
      componentDidMount() { // check to see if already signed in.
          firebase.auth.onAuthStateChanged((user) =&gt; {
              if (user) {
                  this.setState({auth: user});
              } else {
                  this.setState({auth: false});
              }
              this.setState({loading: false});
          });
      }
      
      render() {
          console.log(this.state.auth)
          return (
              &lt;Router&gt;
                  &lt;OuterContainer&gt;
                      {
                          this.state.loading ?
                              &lt;LoadingPage /&gt;
                          :
                              this.state.auth ?
                                  &lt;HomeLoggedIn /&gt; :
                                  &lt;HomeLoggedOut /&gt;
                          
                      }
                      {
                          this.props.showPopupWithParams ?
                          &lt;EditDictionaryPopup
                              dictionary={this.props.showPopupWithParams.dictionary}
                          /&gt;
                          : null
                      }
                  &lt;/OuterContainer&gt;
              &lt;/Router&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>