title: React router: route-based navbar content
body: <p>I have a simple single-page React app setup with navbar, content and footer. Navbar itself consists of two sub-navbars: one that is same for every page, and the one that should change dynamically based on route (page-specific navbar).</p>
  
  <p>So basically, I have one top-level component <code>Container</code>:</p>
  
  <pre><code>&lt;Navbar&gt;
    &lt;Navbar.Main/&gt;
    &lt;Navbar.Page/&gt;
  &lt;/Navbar&gt;
  {this.props.children}
  &lt;Footer/&gt;
  </code></pre>
  
  <p>and routes defined in App:</p>
  
  <pre><code>&lt;Router history={browserHistory}&gt;
    &lt;Route component={Container}&gt;
      &lt;IndexRoute component={Home} /&gt;
      &lt;Route path="/" component={Home} /&gt;
      &lt;Route path="/contact" component={Contact} /&gt;
      &lt;Route path="/about" component={About} /&gt;
      &lt;Route path="*" component={NotFound} /&gt;
    &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>While the page content will change within the <code>{this.props.children}</code> part, I'd like to change content of <code>&lt;Navbar.Page/&gt;</code> navbar component based on the route (Contact page should have Contact-specific navbar, etc.).</p>
  
  <p>I know that I can easily achieve that by rendering page navbar within the page, but I'd like to keep rendering in the navbar itself.</p>