title: Passing props to nested routes in React Router 4. TypeError: render is not a function
body: <p>I'm trying to create nested routes like this, following <a href="https://stackoverflow.com/a/43469277/1800515">this</a> SO answer</p>
  
  <pre><code>/--Home
  |--campaigns
     |--campaigns/:cid
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
      &lt;/BrowserRouter&gt;
      ,
      document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
          &lt;div&gt;
            &lt;Route exact path="/" render={(props) =&gt; &lt;Home foo="bar" {...props}/&gt;}/&gt;
            &lt;Route path="/campaigns" render={(props) =&gt; &lt;Campaigns foo="bar" {...props}/&gt;}/&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>const Home = () =&gt; (
      &lt;div&gt;
          Home
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>Campaigns.js</p>
  
  <pre><code>const Campaigns = () =&gt; (
      &lt;div&gt;
          &lt;Route exact path="/campaigns" render={&lt;div&gt;Campaigns&lt;/div&gt;}/&gt;
          &lt;Route path="/campaigns/:cid" render={(props) =&gt; &lt;Campaign {...props} foo="bar"/&gt;}/&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>Campaign.js</p>
  
  <pre><code>const Campaign = () =&gt; (
      &lt;div&gt;
          &lt;Route path="/campaigns/:cid" render={&lt;div&gt;Campaign 1&lt;/div&gt;}/&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>I'm using the  method since I cannot use the  method to pass props to the component.</p>
  
  <p>While the / route is working fine, when I browse to /campaigns I get: TypeError: render is not a function</p>