Router

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

属性

history { Object } #

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

  1. createBrowserHistory
  2. 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