title: Nested components with React Router
body: <p>I'm following an online React tutorial. In the tutorial React Router 3 used while I got React Router 4 when I downloaded React Router (and <code>react-router-dom</code>). The code in the tutorial looks like this.</p>
  
  <pre><code>import React from "react";
  import {render} from "react-dom";
  import {Router, Route, browserHistory} from 'react-router'
  
  import {Root} from "./components/Root";
  import {Home} from "./components/Home";
  import {User} from "./components/User";
  
  class App extends React.Component {
      render() {
          return (
              &lt;Router history={browserHistory}&gt;
                  &lt;Route path={"/"} component={Root}&gt;
                      &lt;Route path={"user"} component={User}/&gt;
                      &lt;Route path={"home"} component={Home}/&gt;
                  &lt;/Route&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  render(&lt;App /&gt;, window.document.getElementById('app'));  
  </code></pre>
  
  <p>I'm trying to rewrite the code to work with React Router 4 like this:</p>
  
  <pre><code>import React from "react";
  import {render} from "react-dom";
  import {Switch, BrowserRouter, Route} from 'react-router-dom'
  
  import {Root} from "./components/Root";
  import {Home} from "./components/Home";
  import {User} from "./components/User";
  
  class App extends React.Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" component={Root}&gt;
                          &lt;Route path="/user" component={User}/&gt;
                          &lt;Route path="/home" component={Home}/&gt;
                      &lt;/Route&gt;
                  &lt;/Switch&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  
  render(&lt;App /&gt;, window.document.getElementById('app'));
  </code></pre>
  
  <p>This gives me an error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I've tried wrapping the child components with <code>&lt;Switch&gt;</code> and <code>&lt;Root&gt;</code> but it didn't work. How should the child components be wrapped?</p>