Question

我正在关注这个问题：React Router Tutorial。在本教程中，作者做了两件事：

将儿童路线嵌套在另一条路线内

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      {/* make them children of `App` */}
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

添加{this.props.children}

render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>

        {/* add this */}
        {this.props.children}

      </div>
    )
  }

完成这些步骤后，当我点击About或Repos上的链接时，我不会转到新屏幕，但会在同一屏幕上呈现。我在这里不懂逻辑。如果我可以执行上述两个步骤，为什么React Router将在同一屏幕中呈现。请解释一下。

Answer 1

这里的想法是通过显示应出现在每个子路径上的元素来减少重复。在你的情况下，它是导航。您更喜欢什么 - 必须手动在每个页面上添加导航或将其自动添加到每个子路径？

React如何实现它是通过儿童道具，正如官方React文档所说：

在包含开始标记和结束标记的JSX表达式中，这些标签之间的内容作为特殊道具传递： props.children。

如果要避免此行为，则应避免嵌套，或者可以从App组件中删除导航并将其作为单独的组件。然后，您可以逐个将其包含在每个子组件中。

React Router：为什么嵌套路由会在同一页面上进行反应渲染

1 个答案: