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

Question

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

目前正在努力寻找路线和组件。 路由的作用是确定要在特定路径上显示的内容，但随后会显示带有App组件及其所有子组件。

似乎总是显示App内容。 路由定义了在App内部作为其子级显示的内容，对吗？

Answer 1

第什么是你的内部App组件，除非或直到你已经定义并不总是被显示的App作为你的路由配置中根组件。

例如

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

因此，现在您要说的是，当url是/显示我的根组件（即App而当route是/about或/users显示App子组件（即About或Users组件）。

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

{this.props.children} 

随子组件的路线变化而变化。