使用原生 JavaScript 进行路由定义。<Router>
组件将 JSX 语法的 <Route>
转化为原生对象,但是我们也可以直接使用原生对象来配置。属性与 <Route>
组件大致相同,除了以下动态获取自路由的部分:
属性 #
childRoutes
子路由数组,与 JSX 路由的 children
属性相同。
getChildRoutes(nextState, callback)
与 childRoutes
相同,但异步子路由,用于代码分离。
callback
回调
cb(err, routesArray)
// 同步方式获取子路由
let myRoute = {
path: 'course/:courseId',
childRoutes: [
announcementsRoute,
gradesRoute,
assignmentsRoute
]
}
// 异步方式获取子路由
let myRoute = {
path: 'course/:courseId',
getChildRoutes(nextState, cb) {
cb(null, [ announcementsRoute, gradesRoute, assignmentsRoute ])
}
}
indexRoute
与使用 JSX 路由配置语法指定 <IndexRoute>
作用相同。
getIndexRoute(nextState, callback)
与 getChildRoutes
类似,用于代码分离和动态路由加载。
callback
回调
cb(err, route)
// 同步获取
let myIndexRoute = {
component: MyIndex
}
// 使用 indexRoute
let myRoute = {
path: 'courses',
indexRoute: myIndexRoute
}
// 异步首页路由
let myRoute = {
path: 'courses',
getIndexRoute(nextState, cb) {
// 异步处理
cb(null, myIndexRoute)
}
}