API

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

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

• const routes = (
   <Route path="/" component={App}>
     <Route path="groups" component={Groups} />
     <Route path="users" component={Users} />
   </Route>
  )
  
  class App extends React.Component {
   render () {
     return (
       <div>
         {this.props.children}
       </div>
     )
   }
  }
  

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

• const routes = (
   <Route path="/" component={App}>
     <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
     <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
       <Route path=":userId" component={Profile} />
     </Route>
   </Route>
  )
  
  class App extends React.Component {
   render () {
     const { main, sidebar } = this.props
     return (
       <div>
         <div className="Main">
           {main}
         </div>
         <div className="Sidebar">
           {sidebar}
         </div>
       </div>
     )
   }
  }
  
  class Users extends React.Component {
   render () {
     return (
       <div>
         {this.props.children}
       </div>
     )
   }
  }
  

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

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

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

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

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

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

如果想使用三端通用的生命周期，建议使用 withRouter 中的 lifecyle，为组件绑定 actived、inited、received 和 deactived 四个生命周期。

• <Route path="/" onEnter={() => log('enter /')}>
   <Route path="hello" onEnter={() => log('enter /hello')} />
  </Route>
  
  // 进入 /hello 页面，打印如下：
  // enter /
  // enter /hello
  

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

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

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

• <Route path="/" onLeave={() => log('enter /')}>
   <Route path="hello" onLeave={() => log('enter /hello')} />
  </Route>
  
  // 离开这两个页面，打印如下：
  // enter /hello
  // enter /