Router

是基础组件,可以自动设置路由,控制着整个视图堆栈的渲染。并在 URL 发生变动时将正确的 渲染到栈顶。

属性

history { Object }

指定 Router 的历史,原生提供两种历史:browserHistoryhashHistory。这两种历史是纯单页历史,作为原有代码加以保留。另外提供两种兼容历史:

  • createBrowserHistory
  • createHashHistory 这两种历史兼容 web/hy/spa 三种环境,在业务开发中推荐使用。
  1. import { createbrowserHistory } from '@qnpm/yo-router'
  2. const browserHistory = createbrowserHistory()
  3. ReactDOM.render(<Router history={browserHistory} />, el)

children { Route }

子组件,<Router> 的子组件必须是一个或多个 <Route> 组件,或是 PlainRoute。当历史修改时,<Router> 组件将会在路由中匹配一个分支,并一次渲染路由上配置的组件。子路由的组件会被嵌套渲染到父路由的 children 中。

createElement { Function }

当路由准备渲染一个分支的路由组件时,将会使用本方法来创建元素。方法的默认值即 React.createElement,如果想要自行控制组件创建,例如想在组件创建时给 store 挂在监听事件,或给业务组件传递特殊的 props 时,可以自定义该方法。

  1. <Router createElement={createElement} />
  2. // 默认方法就是酱婶儿的
  3. function createElement(Component, props) {
  4. // 确保传递进所有的 props
  5. return <Component {...props} />
  6. }
  7. // 然后我们可以自行定义 createElement 方法
  8. function createElement(Component, props) {
  9. // 当然,还是要确保传递进所有的 props 啊
  10. return <RelayContainer Component={Component} routerProps={props} />
  11. }

默认值: React.createElement

onError { Function }

在匹配路由的过程中,可能会抛出一些异常,可以通过这个回调来捕获并处理。通常只有在使用异步特性时,才会用到该方法。

onUpdate { Function }

当 url 更新之后, 组件会更新 state 以渲染页面,本函数就是那个 setState 的成功回调。

extraRootClass { String }

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

extraRootStyle { String }

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

useViewStack { Boolean }

是否使用 <ViewStack> 来配置页面,详见 ViewStack

默认值: true

render { Function }

配置默认渲染方式,默认会根据 useViewStack 的配置情况自动选择渲染 <ViewStack> 还是 <RouterContext>

useZIndex { Boolean }

是否给每个页面设置 z-index,方便在不同页面层级之间展示一些含有 z-index 的组件。默认为 false,即每个页面都带有 z-index;如果不设置,由于新页面在文档流中的顺序靠下,因此也会盖在老页面的上方。

默认值: false

zIndex { Number }

页面的基准 zIndex,默认为 1

默认值: 1

zIndexGap { Number }

每个页面之前 zIndex 间距,默认为 1

默认值: 1