React Starter Kit中路由和组件的角色

Roles of routes and components in React Starter Kit

本文关键字：组件 角色 路由 Starter Kit React      更新时间：2023-09-26

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

正在处理路由和组件。路由的作用是决定在某个路径上显示什么，然后有App及其所有子组件的组件，它们显示....围绕什么路线定义?

似乎总是显示App中的内容。和路由定义什么显示App内部作为其子的一部分，这是正确的吗?

No。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组件的子路径。

那么对于你问题的第二部分-"routes定义了在App内部显示的内容作为其子元素的一部分，对吗"

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

提到它
    {this.props.children}

e。g 

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}

相关文章：