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

Question

所以我对 React 框架相当陌生，我决定使用 Router v4，尽管它处于测试阶段，但在撰写本文时，它似乎是处理问题的最佳方式.

我有一个显示两个组件之一的路由器

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;

这很有效，当然，我现在想做的是在 Category 组件中添加更多路由。我试过这样的事情：

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>
    );
  }
});

但这给了我一个奇怪的错误，说

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

有没有可能完成这样的特技表演，或者有人对我有其他好的建议吗？

或者是重新思考和实施某种条件渲染的最佳解决方案，具体取决于我从第一个路由器作为道具到达类别组件的路线。

更新：

我意识到 <Route> 似乎不接受内容，所以我添加了一个名为 Display 的组件并像这样导入它：

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>
    );
  }
});

但是显示没有呈现。任何关于为什么会这样的想法将不胜感激。

Answer 1

事实证明，我的更新（参见上面的问题）起到了作用。显示组件在这里出现故障，而不是路由器。

因此，如果其他人偶然发现了这一点，请回顾一下：

<Route> 不接受任何内容，可以使用 <Route> 的 render 函数做一些快速测试。 React Router API documentation 中整齐地总结了所有内容。

干杯！

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

Using React Router v4 is it possible to create multi level routes in child components?

javascript

reactjs

react-router