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>不接受任何内容，可以使用render的{{1}}函数进行快速测试。 React Router API documentation中的所有内容都得到了整齐的总结。

干杯！

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

1 个答案: