React-Router: PlainRoute对象

完整代码:


export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : {onEnter: (nextState, replace) => replace('/cat')},  
  childRoutes : [
    CatRoute(store),
    DogRoute(store)
  ]
})

export default createRoutes

解释是如下:
path作为路径名称,由于这里是根route,所以只用'/'作为名字。
component:这个router要渲染的component。
indexRoute稍后解释
childRoutes: 相当于正常<Router>下的<Route>

在PlainRoute中,indexRoute代表了path对应的默认页面,通常他的值只是一个简单的component,例如:

 indexRoute  : Home,  

在这里“Home”是被引入的一个component。

然而在某些时候我们希望当用户访问根页面的时候自动将他们redirect到其他的页面,例如用户访问"www.pet.com"时,你希望直接让他们看到"www.pet.com/cat"这个页面,这时你需要对indexRoute的值做出如下修改:

 indexRoute  : {onEnter: (nextState, replace) => replace('/cat')},  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,099评论 19 139
  • Lesson11、首先确保安装了Node.js和npm依赖包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心阅读 2,743评论 0 16
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    梁相辉阅读 97,718评论 24 195
  • 概述 传统开发中的 路由,是由服务端根据不同的用户请求地址 URL,返回不同内容的页面,而前端路由则将这些任务通过...
    杨慧莉阅读 1,113评论 1 2
  • github地址,欢迎大家提交更新。 express() express()用来创建一个Express的程序。ex...
    Programmer客栈阅读 2,632评论 0 1