title: React + React-Router: Re-render Navbar component when children component is replaced on redirect
body: <p>I'm using React 15.0.1 with react-router 2.2.1. I'm using App as parent component which renders children components passed from router handlers.</p>
  
  <pre><code>var App = React.createClass({
  
      getInitialState(){
          return {
              auth : false
          }
      },
  
      checkAuth(){
          var self = this;
          $.ajax({
              type : 'GET',
              url : '/auth',
              success : function(res){
                  if(res){
                      self.setState({
                          auth : true
                      });
                  }else{
                      self.setState({ auth : false});
                  }
              }
          });
      },
  
      render() {
          return(
              &lt;div className="appWrapper"&gt;
                  &lt;Navbar auth={this.state.auth}/&gt;
                  &lt;div className="container"&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>This is my Navbar component. </p>
  
  <pre><code>var Navbar = React.createClass({
  
      getInitialState(){
          return{
              user_actions : '' ,
              auth : this.props.auth
          }
      },
  
      componentDidMount(){
          this.checkAuth();
      },
  
      componentWillReceiveProps(nextProps){
          this.setState({
              auth : nextProps.auth
          }, function(){
              this.checkAuthState();
          });
  
          console.log(nextProps.auth);
      },
  
      checkAuth(){
          var self = this;
          $.ajax({
              type : 'GET',
              url : '/auth',
              success : function(res){
                  if(res){
                      self.setState({
                          auth : true
                      });
                  }else{
                      self.setState({ auth : false});
                  }
                  self.checkAuthState();
                  console.log(self.state);
              }
          });
      },
  
      checkAuthState(){
  
          if(!this.state.auth){
              this.state.user_actions =   &lt;ul className="nav navbar-nav navbar-right"&gt;
                                              &lt;li&gt;&lt;a href="/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="/register"&gt;Register&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;;
              this.setState({
                  user_actions : this.state.user_actions
              });
          }
  
          if(this.state.auth){
              this.state.user_actions =   &lt;ul className="nav navbar-nav navbar-right"&gt;
                                              &lt;li&gt;&lt;a href="/logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;;
              this.setState({
                  user_actions : this.state.user_actions
              });
          }
      },
  
      render : function(){
          return (
              &lt;nav className="navbar navbar-default"&gt;
                  &lt;div className="container"&gt;
                      &lt;a href="/" className="navbar-brand"&gt;Reactor&lt;/a&gt;
                      {this.state.user_actions}
                  &lt;/div&gt;
              &lt;/nav&gt;
          );
      }
  });
  </code></pre>
  
  <p>These are my route handlers. When a user lands on route, they will be checked for authentication. If authentication fails, they will be redirected to login route.</p>
  
  <pre><code>var routes = (
      &lt;Router history={browserHistory}&gt;
          &lt;Route path="/" component={require('./components/app')}&gt;
              &lt;IndexRoute component={require('./components/dashboard/index')} onEnter={Auth.isAuthenticated}/&gt;
  
              &lt;Route path="/register"
                     component={require('./components/authentication/register')}
                     onEnter={Auth.isNotAuthenticated} /&gt;
  
              &lt;Route path="/login"
                     component={require('./components/authentication/login')}
                     onEnter={Auth.isNotAuthenticated}/&gt;
  
              &lt;Route path="*"
                     component={require('./components/404/404')}/&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  );
  </code></pre>
  
  <p>When app component mounts with Navbar and children component for the first time, it checks for authentication and adds links to the navbar accordingly. When user redirect from login route to index route after successful login, the children component is replaced with a different component, and that component's life cycle methods are called but Navbar doesn't re-renders. How can i re-render Navbar component so that it can again check for authentication and make changed to navbar links?</p>