您现在的位置:首页 >> 前端 >> 内容

ReactRouter默认路由(IndexRoute)与IndexLink实例讲解

时间:2018/1/19 15:08:01 点击:

  核心提示:默认路由(IndexRoute)与 IndexLink默认路由(IndexRoute)在解释默认路由(IndexRoute)的用例之前,我们来设想一下,一个不使用默认路由的路由配置是什么样的:当用户访...

默认路由(IndexRoute)与 IndexLink

默认路由(IndexRoute)

在解释默认路由(IndexRoute)的用例之前,我们来设想一下,一个不使用默认路由的路由配置是什么样的:


  
    
    
  

当用户访问/时, App 组件被渲染,但组件内的子元素却没有,App内部的this.props.children为 undefined 。 你可以简单地使用 `{this.props.children ||

}` 来渲染一些默认的 UI 组件。

但现在,Home无法参与到比如onEnterhook 这些路由机制中来。 在Home的位置,渲染的是Accounts和Statements。 由此,router 允许你使用IndexRoute,以使Home作为最高层级的路由出现.


  
    
    
    
  

现在App能够渲染{this.props.children}了, 我们也有了一个最高层级的路由,使Home可以参与进来。

Index Links

如果你在这个 app 中使用

Home, 它会一直处于激活状态,因为所有的 URL 的开头都是/。 这确实是个问题,因为我们仅仅希望在Home被渲染后,激活并链接到它。

如果需要在Home路由被渲染后才激活的指向/的链接,请使用Home

Tags:RE EA AC CT 
作者:网络 来源:jiangbo110