Question

我使用过Angular和Flask，我使用过路由和转换，但React-Router的工作原理却令人困惑。

例如，从简介页面https://github.com/rackt/react-router/blob/master/docs/Introduction.md：

{{1}}

此代码嵌套的方式使我很难看到它，并根据我们当前的URL路径告诉您要呈现的内容。

例如＆＃34; /＆＃34;部分总是要渲染，或者只是当我们处于顶级端点时？

＆＃34;关于＆＃34;和＆＃34;收件箱一起渲染或是一个/或场景？

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

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组件，因为我们选择在{{1}中呈现this.props.children，所以将呈现该组件}}

React-路由器，了解转换

1 个答案: