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

【问题标题】：Roles of routes and components in React Starter KitReact Starter Kit 中路由和组件的作用
【发布时间】：2016-10-12 18:26:56
【问题描述】：

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

目前正在为路线和组件而苦苦挣扎。路由的作用是决定在某个路径上显示什么，但是还有带有App的组件及其所有子组件，它们都显示出来......围绕什么路由定义？

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

【问题讨论】：

标签： javascript reactjs react-starter-kit

【解决方案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 内部显示的内容作为其子项的一部分，对吗？”

是的，你是对的 - 但是要将其他组件显示为根组件的子组件，您必须在根组件的渲染方法中通过

    {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，如果路由是 /about 或 /users 显示 App 的子组件，即 About 或 Users 组件.

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

{this.props.children}

随着您的子组件的路径变化而变化。

【讨论】：

而且你自然也会在路由定义中使用组件？
另外，如果您没有页眉、页脚等总体应用框架，但您的主要内容介于两者之间，并且您希望定期对其进行操作。这对这个概念有什么影响？
@Mahoni 是否要提供任何页眉、页脚取决于您。您可以随时操作主要组件。我只是给你一个模板作为例子。