title: How to update ReactJS component based on URL / path with React-Router
body: <p>How can I update a ReactJS component based on URL / path when using React-Router? </p>
  
  <p>The code below works, but is this the correct way to do this? Seems like a lot of code to make a simple update. I was hoping there would be a stateful API call in the router to automatically take care of this scenario.</p>
  
  <pre><code>var MyHomeView = React.createClass({
     componentDidMount: function() {
          this.props.updateHeader(); 
     },
  
     render: function() {
        return (
           &lt;div&gt;
              &lt;h2&gt;Home&lt;/h2&gt;
           &lt;/div&gt;
        );
    } 
  }); 
  
  
  var MyAboutView = React.createClass({
     componentDidMount: function() {
          this.props.updateHeader(); 
     },
  
    render: function() {
      return (
        &lt;div className="my-page-text"&gt;
          &lt;h2&gt;About&lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  });
  
  
  var MyHeader = React.createClass({
    mixins: [ CurrentPath ],
  
    getInitialState: function() {
      return {
         myPath: "about",
         classes: "ion-ios7-information"
      };
    },   
  
     updateHeader: function() {    
        // Classnames refer to www.ionicons.com
       if (this.getCurrentPath() === "/") {
          this.setState( {myPath: "about" } );
          this.setState( {classes: "ion-ios7-information" } );
       } else {
          this.setState( {myPath: "/" } );
          this.setState( {classes: "ion-ios7-rewind" } );
       }      
     }, 
  
    render: function() {
      return (
         &lt;Link to={this.state.myPath}&gt;
            &lt;i className={this.state.classes} /&gt;
         &lt;/Link&gt;
      );
    }
  });
  
  
  var App = React.createClass({
     updateHeader: function() {
        this.refs.header.updateHeader();
     },
  
     render: function() {
        return (
           &lt;div&gt;
              &lt;MyHeader ref="header" /&gt;
  
           &lt;this.props.activeRouteHandler updateHeader={this.updateHeader} /&gt;
           &lt;/div&gt;
        );
    } 
  }); 
  
  
  React.renderComponent((
    &lt;Routes&gt; 
      &lt;Route path="/" handler={App}&gt;
        &lt;DefaultRoute handler={MyHomeView} /&gt;
        &lt;Route name="about" handler={MyAboutView} /&gt;
      &lt;/Route&gt;
    &lt;/Routes&gt;
  ), document.body);
  </code></pre>