React-router学习笔记

之前用react开发了一些模块，对react的使用也更加熟悉了。最近有空，来总结记录一下react相关生态，系统的梳理一下，便于更好的理解和记忆。

首先看一个配置示例：

const routeConfig = { 
	path: '/',
    component: App,】
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About }, 
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              replaceState(null, '/messages/' + nextState.params.id)
            }
          }
        ]
      }
    ]
}

其中：

• path: 设置url
• component: 对应url渲染的组件
• indexRoute: 默认路由渲染的组件
• childRoutes: 子路由
• onEnter: 进入路由的钩子

动态路由：

React Router 里的路径匹配以及组件加载都是异步完成的，不仅允许你延迟加载组件，并且可以延迟加载路由配置。在首次加载包中你只需要有一个路径定义，路由会自动解析剩下的路径。
Route 可以定义 getChildRoutes，getIndexRoute 和 getComponents 这几个函数。它们都是异步执行，并且只有在需要时才被调用。我们将这种方式称之为 “逐渐匹配”。 React Router 会逐渐的匹配 URL 并只加载该 URL 对应页面所需的路径配置和组件。

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

getChildRoutes是个异步执行的函数。在其中使用require.ensure来实现异步加载路由信息。