@aotoo/react-pager

Based on the react of routing (imitation applet), a front support node side rendering, in aotoo – the hub can view which by using the method of stamp here

The installation

npm install @aotoo/react-pager
# or
yarn add @aotoo/react-pager
Copy the code

Note: @aotoo/ React-pager is a front-end routing component based on the React and AOToo libraries

Use the sample

A remote project with aotoo-Hub installed can quickly launch examples

npm install aotoo-cli -g
aotoo init work-space # Installation Environment
cd ./work-space 
aotoo install https://gitee.com/webkixi/hub-aotoo-case.git Install the remote example
aotoo dev hub-aotoo-case # start example
Copy the code

Pager method

Use Pager to build single pages, mimicking the applets page life cycle

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 method
  template,

  // This parameter can be modified using the setData method
  data: {
    file: 'readme.md',},// How to start a page
  // Receives data from the previous page
  onLoad(param){
    let file = param.file
    let $file = this.getData().file
    if(file && file ! == $file) {this.setData({ file })
    }
  },

  // called when the page is displayed
  // Each page calls onLoad and onShow methods,
  // When navigateTo is used to jump to a page, the onShow method is called when back to the page
  onShow(){},

  // When the page is unloaded
  onUnload(){},

  // When all page DOM elements are loaded
  onReady(){}
})

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

Copy the code

Pager.pages

This method is used to define routing tables and build SPA projects. Support node side rendering. The default is to automatically render the structure to the #root container

grammar

Pager.pages([ item, item, ... ] , options)Copy the code

items

Routing table array

Item. url {String} Route address. The ID of the route must be specified with a unique value that will be displayed in the hash section of the address bar

Item. content {Function} specifies the content of the routing subpage, support full import, support import on demand.

options

Options. root {String} Defaults to root, specifying the routing container

Options. sep {String} Defaults to # and is turned into a memory route if left blank

Options. maxAge {String} Cached event of the route history, called when using the saveHistory method

Options. The header {[JSX | Function]} to configure routing page head, support the JSX, or item components configuration

Options. The footer {[JSX | Function]} configuration routing the bottom of the page, support the JSX, or item components configuration

Options. Menus {[JSX | Function]} menu page to configure routing, support JSX

Options. select {[String]} Specifies the default menu item, which displays the page by default. Enter the URL attribute of the routing subline configuration. The parameter can be sent to the page in query mode

Options. beforeNav {Function} Global route guard, manually block/allow all routes

Options. goback {Function} Global route guard that executes the callback upon return

Options. unLoad {Function} Routes unLoad when this method is triggered

Define the SPA route representation example

The routing table

// index.js

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

// Build SPA route and automatically render to #root container (default)
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',})Copy the code

Child pages

// ./_subpages/a.js

function template(state, props) {
  return (
    <div onClick={this.env.ontap}>
      <span>{state.title}</span>
    </div>)}export default function(Pager) {
  const nav = Pager.nav
  return Pager({
    template,

    data: {
      title: 'This is page A.'
    },
    
    ontap(e){
      nav.redirectTo({url: '... '})}onLoad(param){ // param passes parameters to the page
      // when the page loads
    },

    onUnload(){
      // When the page is unloaded
    },

    onReady(){
      // The page DOM has been rendered
      this.setData({
        title: 'Set new content for page A'})}})}Copy the code

server

import index from '.. /index'
const htmlStr = await index
Copy the code

Pager.nav

Nav is an object that contains the following routing methods, designed as a reference to the applet

• navigateTo
• navigateBack
• redirectTo
• redirectBack
• reLaunch

constnav = Pager.nav nav.navigateTo(...) nav.relaunch(...) .Copy the code

reLaunch

Close all pages and open to a page within the app

use

nav.reLaunch({
  url: ' '.success: function(){}... })Copy the code

url

The path (code package path) of the application page that you want to jump to. You can take parameters after the path. Between parameters and paths? Parameter keys and parameter values are connected with =, different parameters are separated with &; Such as’ path? key=value&key2=value2′

beforeNav(to, from, next)

Pre-jump method that prevents jumping to {Object} configuration of the destination page to jump to

From {Object} Configuration of the current page

Next {Function} next(param): Execute this method to allow the route to jump. Param will be merged into the parameter of to, allowing modification of the page parameter to jump

onClick(e, param, inst){
  nav.redirectTo({
    url: '/index/a? file=' + file,
    beforeNav(to, from, next) {
      if{next()}}})}Copy the code

navigateTo

Keep the current page and go to a page in the application. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applets is up to ten layers

See reLaunch for configuration

navigateBack

Close the current page and return to the previous page or multi-level page. You can use getCurrentPages to get the current page stack and determine how many layers you need to return.

See reLaunch for configuration

redirectTo

Close the current page and switch to a page in the application.

See reLaunch for configuration

redirectBack

Close the current page and return to the previous page

See reLaunch for configuration

Routing instance

Pager is a route encapsulation method that supports nested routing. Each time a route is initialized, a new route instance will be generated. When a nav object is used to redirect a route, the NAV object will automatically match the route instance and redirect the route.

However, there are some special points where instance methods need to be handled manually

Obtaining a Routing Instance

let router = Pager.getRouter()  // Get the route instance of the current operation
let rootRouter = Pager.getRootRouter() // Get the ancestor route instance
Copy the code

Route instance method

Router. getCurrentPages Obtains the parameter information of the current route

Router.savehistory Saves historical routing data to localstorage. Usually this operation only applies to rootRouter

Router.clearhistory Clears the route history, which is automatically called when we use the reLaunch route method, usually only for rootRouter

Router. restoreHistory Restores the history of the route by localstorage. Usually, this operation only applies to rootRouter