title: set nav tab style class to active if currently in that route react react-router
body: <p>I have a react and react-router app using 2 nested routes to deliver 3 total routes: /, /about, /contact.  When I click Link's to go to each route the tab on my nav which is in the parent route changes style and shows its active, some bootstrap magic I believe.  The problem is when I visit /about or /contact, the nav tab is not active.  I am new to react but I am guess I need to bind the style attribute to a condition that checks the property of the route, or props or state of component.  I am not exactly sure how to do this, any help would be very appreciated.  </p>
  
  <p>the simplified layout where the nav is</p>
  
  <pre><code>export default class Layout extends React.Component {
    render() { 
        return (
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to="/contact"&gt;Contact&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      )}}
  </code></pre>
  
  <p>Where in the &lt; li > I need something like class={if this.props.children == About, class=active, class=""} </p>
  
  <p>the render routes</p>
  
  <pre><code>render((
    &lt;Router history={hashHistory}&gt;
      &lt;Route path="/" component={Layout}&gt;
        &lt;Route path="/about" component={About}/&gt;
        &lt;Route path="/contact" component={Contact}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
    ), document.getElementById('app'))
  </code></pre>
  
  <p>yea so as noted above the li needs to check if the Layouts props.children is null, or is it about or contact.  I am really not sure how to compare the value of this.props.children if it's a react components</p>
  
  <p>Thanks to all in advanced!!!</p>