使用React Router v4是否可以在子组件中创建多级路由？

Question

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.

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;

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:

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 this is giving me a weird error saying something like

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

Is it even possible to pull off a stunt like this or does anyone have any other good suggestions for me?

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.

---

Update:

I realised that <Route> does not seem to accept contents, so I added a component called Display 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 Display is not rendered. Any ideas as to why this is would be greatly appreciated.

Answer 1

So it actually turns out that my update (see question above) did the trick. The Display component was at fault here, not the router.

So to recap if anyone else stumbles upon this:

<Route> does not accept any contents, one could have used the render function of <Route> to do some quick testing. Everything is neatly summarised in the React Router API documentation .

Cheers!