Using React Router v4 allows you to create layered routes in child components?

So, I'm pretty new to the React framework and I decided to use Router v4 even though it's in beta, at the time of this writing, this seems to be the best way to go about things.

I have a router that shows one of two components

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 (
      <Router>
        <div>
          <Route path='/category/:categoryId' component={Category}} />
          <Route path='/Hist' component={Hist} />
        </div>
      </Router>
    );
  }
});

export default Controls;

      

        
        
        
      

    

It works like a charm, of course what I want to do now is some more routing inside the Category component. I've tried something like this:

import React from 'react';
import { Route, Link } from 'react-router-dom';

const Category = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to='/category/1'>Category 1</Link></li>
          <li><Link to='/category/2'>Category 2</Link></li>
        </ul>
        <div className='category-display'>
          <Route path='/category/1'>This is Category 1</Route>
          <Route path='/category/2'>This is Category 2</Route>
        </div>
      </div>
    );
  }
});

      

        
        
        
      

    

But it gives me a strange error saying something like

Uncaught Error: React.Children.only expected to receive a single React element child.

      

        
        
        
      

    

Is it possible to film the stunt at all, or does anyone have any other good suggestions for me?

Or is it a better solution to rethink and implement some conditional rendering depending on the route I get in the Category component as props from the first router.

Update:

I realized that <Route>

it doesn't seem to accept content, so I added a Display component and imported it like so:

import React from 'react';
import { Route, Link } from 'react-router-dom';
import Display

const Category = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to='/category/1'>Category 1</Link></li>
          <li><Link to='/category/2'>Category 2</Link></li>
        </ul>
        <div className='category-display'>
          <Route path='/category/1' component={Display} />
          <Route path='/category/2' component={Display} />
        </div>
      </div>
    );
  }
});

      

        
        
        
      

    

However, the display is not displayed. Any ideas as to why this would be would be greatly appreciated.