title: React Router multiple optional components
body: <p>I have a React app that uses React Router, and my router looks something like this:</p>
  
  <pre><code>&lt;ConnectedRouter history={history}&gt;
          &lt;App&gt;
              &lt;Route
                  exact
                  name="Login"
                  path="/login"
                  component={Login}
              /&gt;
              &lt;Route
                  exact
                  name="Home"
                  path="/"
                  component={Home}
              &gt;
          &lt;/App&gt;
  &lt;/ConnectedRouter&gt;
  </code></pre>
  
  <p>So far so good. However, I want to have the App be able to render a sidebar on the left, based on path (not all Routes would render a sidebar). Ideally, the Route component (e.g. <code>Home</code>) would be able to specify its sidebar component and the App would be able to find that and render it in the appropriate place. But <code>App</code> just gets a bunch of children which are <code>Route</code> components, and as far as I can tell, there's no way to determine which route(s) have actually been rendered from within App.</p>
  
  <p>Presumably, I could have separate Route components to define the sidebar components, but I would prefer to not have to duplicate Routes so that I can associate the sidebar with its component (e.g. Home would have a sidebar and it would be possible to look at the code for the Home component to see what its sidebar would look like, rather than some other completely different file).</p>