React-Router，理解转换

Question

我使用过 Angular 和 Flask，也使用过路由和转换，但是 React-Router 的工作方式有些令人困惑。

例如来自介绍页面https://github.com/rackt/react-router/blob/master/docs/Introduction.md：

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* Add the route, nested where we want the UI to nest */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

这段代码嵌套的方式让我很难看到它并告诉你根据我们当前所在的 URL 路径将呈现什么。

例如，“/”部分总是要渲染还是仅在我们处于顶级端点时渲染？

“关于”和“收件箱”是一起呈现还是两者兼而有之？

对不起，如果这对某些人来说非常明显。这让我有点绊倒了太久了，所以我想问问你们。 :)

Answer 1

给定以下App 组件：

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App title</h1>
        {this.props.children}
      </div>
    );
  }
});

点击/ 会渲染该组件，而this.props.children 是undefined。

点击/about，路由器首先解析/，所以App组件再次渲染，和之前一样。

从那里，路由器向下钻取路由层次结构，查看是否有任何路径与字符串的其余部分匹配，即about。还有：

<Route path="about" component={About} />

这条路由是App的直接子级，所以this.props.children现在是About组件，因为我们选择在App中渲染this.props.children，所以会被渲染。