频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
react-router服务器渲染match方法之renderProps内部结构
2017-05-25 09:36:00         来源:高山上的鱼  
收藏   我要投稿

react-router服务器渲染match方法之renderProps内部结构。
下面是react-router的match方法中的renderProps属性的内部签名:
其中renderProps包含routes,params,location,components,router,matchContext属性。

 { 
    //renderProps包含routes对象
    routes:
    [ { path: '/',
        component: [Function: App],
        IndexRoute: [Object],
        childRoutes: [Object]
     },
      { component: [Function: Home], path: 'home' } 
    ],
   //renderProps包含params对象
   params: {},
   // renderProps包含location对象
   location:
    { pathname: '/home',
      search: '',
      hash: '',
      state: undefined,
      action: 'POP',
      key: '34hg49',
      query: {}
     },
    // renderProps包含components对象
   components: [ [Function: App], [Function: Home] ],
   // renderProps包含router对象
   router:
    { getCurrentLocation: [Function: getCurrentLocation],
      listenBefore: [Function: listenBefore],
      listen: [Function: listen],
      transitionTo: [Function: transitionTo],
      push: [Function: push],
      replace: [Function: replace],
      go: [Function: go],
      goBack: [Function: goBack],
      goForward: [Function: goForward],
      createKey: [Function: createKey],
      createPath: [Function: createPath],
      createHref: [Function: createHref],
      createLocation: [Function: createLocation],
      canGo: [Function: canGo],
      unsubscribe: [Function: unsubscribe],
      setRouteLeaveHook: [Function: listenBeforeLeavingRoute],
      isActive: [Function: isActive],
      location:
       { pathname: '/home',
         search: '',
         hash: '',
         state: undefined,
         action: 'POP',
         key: '34hg49',
         query: {} 
     },
      params: {},
      routes: [ [Object], [Object] ] 
      },
   // renderProps包含matchContext对象
   matchContext:
    { transitionManager:
       { isActive: [Function: isActive],
         match: [Function: match],
         listenBeforeLeavingRoute: [Function: listenBeforeLeavingRoute],
         listen: [Function: listen] },
      router:
       { getCurrentLocation: [Function: getCurrentLocation],
         listenBefore: [Function: listenBefore],
         listen: [Function: listen],
         transitionTo: [Function: transitionTo],
         push: [Function: push],
         replace: [Function: replace],
         go: [Function: go],
         goBack: [Function: goBack],
         goForward: [Function: goForward],
         createKey: [Function: createKey],
         createPath: [Function: createPath],
         createHref: [Function: createHref],
         createLocation: [Function: createLocation],
         canGo: [Function: canGo],
         unsubscribe: [Function: unsubscribe],
         setRouteLeaveHook: [Function: listenBeforeLeavingRoute],
         isActive: [Function: isActive],
         location: [Object],
         params: {},
         routes: [Object] 
     }
   } 
 }
点击复制链接 与好友分享!回本站首页
上一篇:css实现图片动态效果
下一篇:03-CSS3-圆角、阴影、边框图片、盒子内减
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站