Route

用于给组件声明路由,以清晰的表示你的组件架构。Route 被阻止为嵌套的树状结构,当接收到新 URL 时,会使用深度优先搜索找到路径匹配的 URL。当找到之后,所有经历过的路径都会被标记为 active,路径上的所有组件也都会被渲染到 DOM 上,其渲染顺序与树状结构的定义顺序一致。

属性

path { String }

用于匹配 URL 的路由,当使用 / 开头时,被认为是绝对路径,否则认为是相对路径,将自动连接父路径。

component { Component }

当匹配到当前路由上时匹配的组件,会被渲染为父组件的 this.props.children

  1. const routes = (
  2. <Route path="/" component={App}>
  3. <Route path="groups" component={Groups} />
  4. <Route path="users" component={Users} />
  5. </Route>
  6. )
  7. class App extends React.Component {
  8. render () {
  9. return (
  10. <div>
  11. {this.props.children}
  12. </div>
  13. )
  14. }
  15. }

components { Object }

可以定义多个命名组件,这样不会直接渲染为父组件的 children,而是当做 props 赋给父组件。

  1. const routes = (
  2. <Route path="/" component={App}>
  3. <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
  4. <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
  5. <Route path=":userId" component={Profile} />
  6. </Route>
  7. </Route>
  8. )
  9. class App extends React.Component {
  10. render () {
  11. const { main, sidebar } = this.props
  12. return (
  13. <div>
  14. <div className="Main">
  15. {main}
  16. </div>
  17. <div className="Sidebar">
  18. {sidebar}
  19. </div>
  20. </div>
  21. )
  22. }
  23. }
  24. class Users extends React.Component {
  25. render () {
  26. return (
  27. <div>
  28. {this.props.children}
  29. </div>
  30. )
  31. }
  32. }

navigation { Object }

接受一个 navigator 配置对象,与 hysdk/QunarAPI 的配置方式基本相同,区别在于将类型 type 放在里面处理了。

  1. const nav = {
  2. type: 'normal', // normal/transparent/none 支持去掉 navibar- 的缩写,也可以写 navibar-normal
  3. title: { style: 'text', text: '标题' },
  4. left: { ... },
  5. section: {
  6. left: 'header .regret', // 对应 h5 的元素,在点击 native 时,可以模拟点击 h5
  7. title: 'header .title$', // 在类名末尾添加 `$` 表示阻止 native 处理该事件
  8. $buttonsDoNotSimulate: [ 'left' ] // 阻止模拟点击的按钮,默认阻止了 'left' 按钮穿透点击 h5
  9. },
  10. // 支持三种,touchTap/tap/click,用于模拟点击 h5 header 的元素
  11. // 其中 touchTap 对应的是引入 onTouchTap 插件之后绑定的 onTouchTap 事件;
  12. // tap 对应的是 Yo 的 Touchable 组件绑定的 tap 事件(实际上是模拟 onTouchStart 和 onTouchEnd)
  13. // click 就是 onClick
  14. // 默认是 tap
  15. $simulateType: 'tap'
  16. }

animate { String }

页面跳转动画,包括 moveFromRight/moveFromBottom/none,只有 hy 环境和 spa 有,多页场景下没有。注意,在 useViewStack 设置为 false 时将不会生效。

extraClass { String }

根组件附加类名,对 <yorouter-view> 元素添加自定义类名。注意,在 useViewStack 设置为 false 时将不会生效。

extraStyle { String }

根组件附加样式,对 <yorouter-view> 元素进行样式操作。注意,在 useViewStack 设置为 false 时将不会生效。

onEnter { Function }

配置 onEnter 回调,在进入路由前调用。三端均可使用该周期。

如果想使用三端通用的生命周期,建议使用withRouter 中的 lifecyle,为组件绑定 activedinitedreceiveddeactived 四个生命周期。

  1. <Route path="/" onEnter={() => log('enter /')}>
  2. <Route path="hello" onEnter={() => log('enter /hello')} />
  3. </Route>
  4. // 进入 /hello 页面,打印如下:
  5. // enter /
  6. // enter /hello

onChange { Function }

配置 onChange 回调,在路由改变时调用。注意,只有单页应用会触发这个回调。

  1. <Route path="/" onChange={() => log('onChange')}>
  2. <Route path="hello" />
  3. <Route path="test" />
  4. </Route>
  5. // 从 /hello 进入 /test 页面,会触发 onChange,因为 / 是两者的公共父路由,这次的变动没有退出父路由,仅仅触发了改变

onLeave { Function }

配置 onLeave 回调,在离开路由时调用。注意,只有单页应用会触发这个回调。

  1. <Route path="/" onLeave={() => log('enter /')}>
  2. <Route path="hello" onLeave={() => log('enter /hello')} />
  3. </Route>
  4. // 离开这两个页面,打印如下:
  5. // enter /hello
  6. // enter /

方法

getComponent

component 类似,异步获取组件,用于进行代码分离。

  1. <Route path="courses/:courseId" getComponent={(nextState, cb) => {
  2. // 异步方法获取组件
  3. cb(null, Course)
  4. }} />

方法参数:

参数名类型描述必选支持版本
nextStateObject
callbackFunction

getComponents

components 类似,异步获取组件,用于进行代码分离。

  1. <Route path="courses/:courseId" getComponents={(nextState, cb) => {
  2. // 异步方法获取组件
  3. cb(null, {sidebar: CourseSidebar, content: Course})
  4. }} />

方法参数:

参数名类型描述必选支持版本
nextStateObject
callbackFunction