title: Using React Router v4 is it possible to create multi level routes in child components?
body: <p>So I'm fairly new to the React framework, and I have decided to use Router v4, even though it is in beta, at the time of writing this, it seems to be the best way to go about things. </p>
  
  <p>I have a router that shows one of two components </p>
  
  <pre><code>import React from 'react';
  import { HashRouter as Router, Route } from 'react-router-dom';
  import Category from './category/Category';
  import Hist from './hist/Hist';
  
  const Controls = React.createClass({
    render: function() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Route path='/category/:categoryId' component={Category}} /&gt;
            &lt;Route path='/Hist' component={Hist} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  });
  
  export default Controls;
  </code></pre>
  
  <p>This works like a charm, of course, what I want to do now is to have some more routing inside of the Category component. I have tried something like this:</p>
  
  <pre><code>import React from 'react';
  import { Route, Link } from 'react-router-dom';
  
  const Category = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;Link to='/category/1'&gt;Category 1&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to='/category/2'&gt;Category 2&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div className='category-display'&gt;
            &lt;Route path='/category/1'&gt;This is Category 1&lt;/Route&gt;
            &lt;Route path='/category/2'&gt;This is Category 2&lt;/Route&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>But this is giving me a weird error saying something like </p>
  
  <pre><code>Uncaught Error: React.Children.only expected to receive a single React element child.
  </code></pre>
  
  <p>Is it even possible to pull off a stunt like this or does anyone have any other good suggestions for me? </p>
  
  <p>Or is the best solution to rethink and implement some sort of conditional rendering depending on the route I get to the Category component as props from the first router. </p>
  
  <hr>
  
  <p>Update: </p>
  
  <p>I realised that <code>&lt;Route&gt;</code> does not seem to accept contents, so I added a component called Display and imported it like so: </p>
  
  <pre><code>import React from 'react';
  import { Route, Link } from 'react-router-dom';
  import Display
  
  const Category = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;Link to='/category/1'&gt;Category 1&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to='/category/2'&gt;Category 2&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div className='category-display'&gt;
            &lt;Route path='/category/1' component={Display} /&gt;
            &lt;Route path='/category/2' component={Display} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>However Display is not rendered. Any ideas as to why this is would be greatly appreciated.</p>