Router

属性

history { Object }

指定 Router 的历史，原生提供两种历史：browserHistory 和 hashHistory。这两种历史是纯单页历史，作为原有代码加以保留。另外提供两种兼容历史：

• createBrowserHistory
• createHashHistory 这两种历史兼容 web/hy/spa 三种环境，在业务开发中推荐使用。

import { createbrowserHistory } from '@qnpm/yo-router'
const browserHistory = createbrowserHistory()
ReactDOM.render(<Router history={browserHistory} />, el)

children { Route }

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

createElement { Function }

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

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

默认值: 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