title: React.Children.only expected to receive a single React element child in React Router v4
body: <p>I installed <code>react-router-dom</code> 4.1.1 and keep receiving the following error when trying to render my components:</p>
  
  <blockquote>
    <p>Uncaught Error: <code>React.Children.only</code> expected to receive a single React element child.</p>
  </blockquote>
  
  <p>Here's my <code>app.js</code> file:</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as Router, Route} from 'react-router-dom';
  import Nav from './components/Nav/nav';
  import Search from './components/Search/search';
  import Favorites from './components/Favorites/favorites';
  
  const App = () =&gt; (
   &lt;Router&gt;
      &lt;div className="app"&gt;
        &lt;Nav /&gt;
        &lt;Route exact path="/" component={Search}/&gt;
        &lt;Route path="/favorites" component={Favorites}/&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  
  export default App;
  </code></pre>
  
  <p>And here is <code>nav.jsx</code>:</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as NavLink} from 'react-router-dom';
  
  const Nav = () =&gt; (
      &lt;ul className="nav"&gt;
          &lt;li&gt;&lt;NavLink exact to="/" activeClassname="active"&gt;Search&lt;/NavLink&gt;&lt;/li&gt;
          &lt;li&gt;&lt;NavLink to="/favorites" activeClassname="active"&gt;Favorites&lt;/NavLink&gt;&lt;/li&gt;
      &lt;/ul&gt;
  );
  
  export default Nav;
  </code></pre>
  
  <p>When I remove <code>&lt;Nav /&gt;</code> from <code>app.js</code> it renders, but I don't see what's wrong with the <code>nav.jsx</code> file.</p>