title: React Router v4: Component and Children in the same route
body: <p>I am a beginner with react and have upgraded a base project to react router v4. The app seems to be working fine, but I am always getting the following warning:</p>
  
  <p><strong>Warning: You should not use &lt;Route component&gt; and &lt;Route children&gt; in the same route; &lt;Route children&gt; will be ignored</strong></p>
  
  <p>This is my app (leaving some imports out for readability):</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>ReactDOM.render(
      &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
          &lt;BrowserRouter&gt;{routes}&lt;/BrowserRouter&gt;
      &lt;/Provider&gt;
      , document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>routes.js:</strong></p>
  
  <pre><code>import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link
  } from 'react-router-dom';
  
  
  export default (
      &lt;Main&gt;
        &lt;Route path="/topics/create" component={CreateTopicView}&gt; &lt;/Route&gt;
        &lt;Route path="/topics/search" component={SearchTopicsView}&gt; &lt;/Route&gt;
        &lt;Route path="/topics/manage" component={ManageTopicsView}&gt; &lt;/Route&gt;
        &lt;Route path="/moderation/pre" component={ModerationPreView}&gt; &lt;/Route&gt;
        &lt;Route path="/moderation/post" component={ModerationPostView}&gt;&lt;/Route&gt;
        &lt;Route path="/dashboard" component={DashboardView}&gt; &lt;/Route&gt;
        &lt;Route exact={true} path="/" component={DashboardView}&gt; &lt;/Route&gt;
      &lt;/Main&gt;
  );
  </code></pre>
  
  <p><strong>main.js:</strong></p>
  
  <pre><code>import PropTypes from 'prop-types'
  import { withRouter } from 'react-router'
  
  
  class Main extends React.Component {
      static propTypes = {
          match: PropTypes.object.isRequired,
          location: PropTypes.object.isRequired,
          history: PropTypes.object.isRequired
        }
  
      render() {
          let wrapperClass = "gray-bg " + this.props.location.pathname;
          return (
              &lt;div id="wrapper"&gt;
                  &lt;Progress /&gt;
                  &lt;Navigation location={this.props.location}/&gt;
  
                  &lt;div id="page-wrapper" className={wrapperClass}&gt;
  
                      &lt;TopHeader /&gt;
  
                      {this.props.children}
  
                      &lt;Footer /&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          )
      }
  }
  
  
  export default withRouter(Main)
  </code></pre>
  
  <p>The idea is that most components in the <code>Main</code> component (e.g. the <code>Navbar</code>) should always be loaded, also the <code>Navbar</code> needs to know the current path so it can display the current selection.</p>
  
  <p>Then between the <code>TopHeader</code> and <code>Footer</code> the variable content should be shown based on the path.</p>
  
  <p>What am I doing wrong, how can I solve the warning about <code>Route Component</code> and <code>Route Children</code> in the same path?</p>