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

Question

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

目前正在努力处理路线和组件。 routes 的作用是决定在特定路径上显示什么，然后有 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 组件的 children。

所以对于你问题的第二部分 - "routes define what to display inside of App as part of its children, is that correct"

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

在根组件的渲染方法中提及它

    {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 显示 children App 的组件，即 About 或 Users 组件。

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

{this.props.children}

随着您的路线随着 children 组件的变化而变化。

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

Roles of routes and components in React Starter Kit

javascript

reactjs

react-starter-kit