@aotoo/react-pager

基于react的一款前端路由(仿小程序)，支持node端渲染，在aotoo-hub中可以查看该路由使用方法，戳这里

安装

npm install @aotoo/react-pager
# 或者
yarn add @aotoo/react-pager

Pager方法

我们使用Pager来构建单页面，仿小程序页面生命周期

import React from 'react'
import ReactDOM from 'react-dom'
import Pager from '@aotoo/react-pager'

function template(state, props) {
  return <div>{state.file}</div>
}

const page = Pager({
  // page的模板方法
  template,

  // 可以通过setData方法修改此处参数
  data: {
    file: 'readme.md',
  },

  // 页面开始的方法
  // 接收上一个页面传递的数据
  onLoad(param){
    let file = param.file
    let $file = this.getData().file
    if (file && file !== $file) {
      this.setData({ file })
    }
  },

  // 页面显示时调用
  // 每个页面都会调用onLoad和onShow方法，
  // 当使用navigateTo方法跳转页面时, back回来此页面时会调用onShow的方法
  onShow(){},

  // 页面卸载时
  onUnload(){},

  // 页面dom元素全部加载完成时
  onReady(){}
})

ReactDOM.render(<page.UI />, document.getElementById('root'))

Pager.pages

该方法用于定义路由表，构建SPA项目。支持node端渲染。默认会自动渲染结构到 #root 容器

语法

Pager.pages([
  item,
  item,
  ...
], options)

items

路由表数组

item.url
{String}
路由地址，该条路由的ID，必须指定唯一值，地址栏的hash部分将显示该值

item.content
{Function}
指定路由子页内容，支持全量引入(require)，支持按需引入(import)

options

options.root
{String}
默认为root，指定路由容器

options.sep
{String}
默认为#，置为空则转为内存路由

options.maxAge
{String}
路由历史记录的缓存事件，使用saveHistory方法时调用

options.header
{[JSX|Function]}
配置路由页面的头部，支持JSX，或者item组件配置

options.footer
{[JSX|Function]}
配置路由页面的底部，支持JSX，或者item组件配置

options.menus
{[JSX|Function]}
配置路由页面的菜单部分，支持JSX

options.select
{[String]}
默认菜单项，默认显示页面，填写路由子线配置的url属性，该属性支持query方式传递参数给进入页面，不填写则默认第一条路由数据作为首页

options.beforeNav
{Function}
全局路由守卫，手动拦截/放行所有路由

options.goback
{Function}
全局路由守卫，返回后执行该回调

options.unLoad
{Function}
路由卸载时，触发此方法

定义SPA路由表示例

路由表

// index.js

import Pager from '@aotoo/react-pager'
const nav = Pager.nav

// 构建SPA路由，并自动渲染至#root容器(默认)
export default Pager.pages([
  {url: '/index/a', content: import('./_subpages/a')},
  {url: '/index/b', content: import('./_subpages/b')},
  {url: '/index/c', content: require('./_subpages/c')},
], {
  select: '/index/a',
})

子页面

// ./_subpages/a.js

function template(state, props) {
  return (
    <View>
      <Text>{state.title}</Text>
    </View>
  )
}

export default function(Pager) {
  return Pager({
    template,

    data: {
      title: '这是a页面'
    },
    
    onLoad(param){ // param为页面传递参数
      // 页面加载时
    },

    onUnload(){
      // 页面卸载时
    },

    onReady(){
      // 页面dom已被渲染完成时
      this.setData({
        title: '为a页面设置新的内容'
      })
    }
  })
}

server

import index from '../index'
const htmlStr = await index

Pager.nav

Pager.nav是一个对象，包含下面路由方法，路由方法的设计参考自小程序

• navigateTo
• navigateBack
• redirectTo
• redirectBack
• reLaunch

const nav = Pager.nav

nav.navigateTo(...)
nav.relaunch(...)
...

reLaunch

关闭所有页面，打开到应用内的某个页面

使用

nav.reLaunch({
  url: '',
  success: function(){}
  ...
})

| 属性 | 类型 | 默认值 | 必填 | 说明 | | :----: | :----: | :----: | :----: | :---- | | url | string | | 是 | 跳转的应用内页面路径 | | beforeNav | function | | 否 | 跳转前动作 | | success | function | | 否 | 跳转成功执行 | | fail | function | | 否 | 跳转失败执行 | | complete | function | | 否 | 跳转执行(成功&失败) | | events | object | | 否 | 未实现 |

url

需要跳转的应用内页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

beforeNav(to, from, next)

跳转前方法，该方法可阻止跳转 to
{Object}
将要跳转的目的页面的配置

from
{Object}
当前页面的配置

next
{Function}
next(param): 执行该方法允许路由跳转，param将被合并到to的参数中，允许修改将要跳转页面页面参数

onClick(e, param, inst){
  nav.redirectTo({
    url: '/index/a?file=' + file,
    beforeNav(to, from, next) {
      if (满足条件) {
        next()
      }
    }
  })
}

navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

配置参考 reLaunch

navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

配置参考 reLaunch

redirectTo

关闭当前页面，跳转到应用内的某个页面。

配置参考 reLaunch

redirectBack

关闭当前页面，返回上一页面

配置参考 reLaunch

路由实例

Pager是路由的封装方法，支持嵌套路由，每一次路由初始化将会产生一个新的路由实例，使用nav对象做路由跳转时，nav对象会自动匹配路有实例并实现路由跳转。

但有一些特殊点的实例方法需要手动操作

获取路由实例

let router = Pager.getRouter()  // 获取当前操作的路由实例  
let rootRouter = Pager.getRootRouter() // 获取祖先路由实例  

路由实例方法

router.getCurrentPages
获取当前路由的参数信息

router.saveHistory
保存路由的历史数据到localstorage，通常这个操作只针对rootRouter

router.clearHistory
清空路由的历史记录，当我们使用reLaunch路由方法时会自动调用，通常这个操作只针对rootRouter

router.restoreHistory
由localstorage恢复路由的历史记录，通常这个操作只针对rootRouter