Question

这是我在这里发表的第一篇文章，希望我能覆盖所有内容并搜索各种主题，观看一些视频，在卡住之前阅读路由器文件。： - （

我正在处理单页应用，其中包含以下组件：

布局 - 父组件，有两个孩子：
- 地图 - 子组件
- 事件 - 子组件，有一个子组件：
  - EventDetails

尝试配置react路由器以始终在页面上保留Layout组件，并渲染地图和事件。在Inside Events中，当点击带有event_id的链接时（链接工作正常），它应显示在EventDetails中。我无法弄清楚如何让EventDetails组件显示到事件中，布局仍在显示。

我很确定我的路线配置错误，或者完全不了解IndexRoute ......提前感谢您的回复。

我的路由器配置下面的图片和一些代码。

布局图的简短链接：http://i.imgur.com/lOtpWqE.png

和

的链接

React router config：

<Router history={hashHistory}>

<Route path="/" component={Layout} >
    <Route path="/events/:event_id" component={EventDetail} />
</Route>

Answer 1

React-router通过将组件注入children道具来控制应该可见的内容。

让我们假设你有以下路线：

<Route path="/" component={Layout} >
    <Route path="/maps" component={Maps} />
    <Route path="/events/" component={Events}>
       <Route path="/events/:event_id" component={EventDetail}>
    </Route>
</Route>

使用这些路由时，当您在children路径上时，路由器将自动将地图部件传递给布局组件中的/maps道具，或者当您在/event时使用事件组件。嵌套组件/路由也会发生同样的事情。您的工作是在根组件的渲染方法和想要显示其他嵌套组件的子组件中使用{this.props.children}。

总结一下你的Layout组件渲染方法应如下所示：

render() {
   <div>
      <div> [LAYOUT] This part doesn't change between routes </div>
      <div>
          {this.props.children} // here I render nested component like events or maps
      </div>
   </div>
}

然后是你的活动组件

 render() {
       <div>
          <div> [EVENT] This part doesn't change between nested event routes </div>
          <div>
              {this.props.children} // here I render nested component inside event route like EventDetails
          </div>
       </div>
    }

这里有反应路由器课程的集合： https://github.com/reactjs/react-router-tutorial/tree/master/lessons （第7课是你的情况）。

IndexRoute是一个包含path="/"

的路径组件

具有固定布局的SPA的React路由器配置

1 个答案: