Question

我目前正在尝试了解React Starter Kit规划项目的方式以及它的部分如何协同工作。

目前正在努力寻找路线和组件。路由的作用是决定在某个路径上显示什么，但是有些组件有App及其所有子组件，它们会显示....围绕哪些路由定义？

似乎总是显示App中的内容。并且路由定义了App内部作为其子项的一部分显示的内容，这是正确的吗？

Answer 1

没有。除非您在路由配置中将App定义为根组件，否则App组件内部的内容并不会始终显示。

e.g

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>

在上面的代码定义中

  <Route path="/" component={App}>

导致App组件首先显示，所有其他路径路径都是App组件的子组件。

因此，对于问题的第二部分 - “路径定义了在App内部显示的内容，作为其子代的一部分，是正确的”

是的你是对的 - 但是要将其他组件显示为根组件的子组件，您必须通过

在根组件的render方法中提及它

    {this.props.children}

例如

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/users">users</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

所以现在您要告诉我，当网址/显示我的根组件即App时，如果路由为/about或/users则显示App的子组件} {ie About或Users组件。

您的根组件App就像一个模板，您可以在其中显示标题，导航栏，页脚作为静态内容。但是你说的身体部位

{this.props.children}

随着您的路线随您的孩子组件而变化，

正在发生变化。

路线和组件在React Starter Kit中的作用

1 个答案: