title: Why am I losing my ReactJS state?
body: <p>I'm new to ReactJS, but I have a simple use case: I have a login form that sets the user's state (full name, etc.) and then I use the React Router to browserHistory.push('/') back to the home page. I can confirm that if I stay on the login page that my states actually get saved, however when I go back to the homepage, and into my "parent" component (App.js) and run this before the render method:</p>
  
  <p><code>console.log(this.state) // this returns null</code></p>
  
  <p>It always returns true. My constructor is not even doing anything with the state. If I put a log in the constructor on my App.js parent component I can verify that the page is not actually being reloaded, that the component is only mounted once (at least the constructor on App.js is only called once during the whole homepage > login > homepage lifecycle). Yet again, the state seems to be removed after changing pages.</p>
  
  <p>What simple thing am I missing?</p>
  
  <p>Edit: some code, trying to simplify it:</p>
  
  <pre><code>// LoginForm.js
  //Relevant method
    handleSubmit() {
     this.login(this.state.username, this.state.password, (success) =&gt; {
        if (!success)
        {
          this.setState({ isLoggedIn: false })
          this.setState({ loginError: true })
          return
        }
  
        this.setState({ isLoggedIn: true })
  
        browserHistory.push('/') // I can verify it gets here and if at this point I console.log(this.isLoggedIn) I return true
      })
    }
  
      // App.js
      class App extends React.Component {
  
        constructor(props) {
          super(props);
          console.log('hello')
        }
  
        render() {
          const { props } = this
          console.log(this.state) // returns null
      return (
      &lt;div&gt;
        &lt;AppBar style={{backgroundColor: '#455a64'}}
                title="ADA Aware"
                showMenuIconButton={false}&gt;
          &lt;LoginBar/&gt;
        &lt;/AppBar&gt;
        &lt;div&gt;
          {props.children}
        &lt;/div&gt;
      &lt;/div&gt;
    )}
      //Part of my routes.js
      export default (
        &lt;Route path="/" component={App}&gt;
          &lt;IndexRoute component={HomePage}/&gt;
          &lt;Route path="/login" component={LoginForm}/&gt;
          &lt;Route path="*" component={NotFoundPage}/&gt;
        &lt;/Route&gt;
      );
  </code></pre>