React router: route-based navbar content
<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>