title: React Router - render two components under one route / enable child component to still access params?
body: <p>My React Router thingy looks like this:</p>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route path='/posts/:id' component={PostsView} /&gt;
    &lt;Route exact path='/' component={Home}/&gt;
    &lt;Route component={NotFound}/&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>I would now like to implement an AudioPlayer and show it on the same page. </p>
  
  <p>I could of course just import the <code>AudioPlayer</code> in the <code>PostsView</code> and render it from there. However, I think it would be nicer and more pure to not mix the two components, but have them next to another in a third component which renders both of them and is only responsible for showing stuff on the screen. </p>
  
  <p>I tried to do that, but I got stuck, since my Posts Component needs the route <code>/posts/:id</code>, so I could not just put it in a third component. I tried something like this:</p>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route path='/sentences/:id' component={Main} /&gt;
    &lt;Route exact path='/' component={Home}/&gt;
    &lt;Route component={NotFound}/&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>and then in <code>Main</code> I tried:</p>
  
  <pre><code>render() {
      return (
        &lt;div&gt;
          &lt;PostsView /&gt;
          &lt;AudioPlayer /&gt;
        &lt;/div&gt;
        );
    }
  </code></pre>
  
  <p>... but this seems to be the wrong approach, since things go wrong with react router then! What would be the most sensible approach to combine the two components, and keep my routing intact?</p>