name: Router title: 路由 route: /components/Router category: '导航'

@hyext/router

路由系列组件。

Installation

安装前，请更新@hyext/builder-beyond至1.4.15以上

$ npm i @hyext/builder-beyond@latest -D

安装路由

$ npm i @hyext/router -S

Usage

import { Route, Router } from "@hyext/router";
import { UI } from "@hyext/hy-ui";
import React, { Component } from "react";

const { Tab, View, Text } = UI

const createPage = (desc) => {
  return (props) => {
    return (
      <View style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 100
      }}>
        <Text>{desc}的props.location: {JSON.stringify(props.location, null, 2)}</Text>
      </View>
    )
  }
}

class RouteScreen extends Component {
  state = {
    tab: [
      {
        value: '/page1',
        label: 'page1'
      },
      {
        value: '/page2',
        label: 'page2'
      },
      {
        value: '/page3',
        label: 'page3'
      }
    ],
    currPath: '/page1'
  }

  handleChange = (item) => {
    const path = item.value
    this.setState({
      currPath: path
    })
    this.$router.history.replace(path)
  }

  render() {
    
    return (
      <View style={{ flex: 1 }}>
        <Tab data={this.state.tab} value={this.state.currPath} onChange={this.handleChange}></Tab>
        <Router initialEntries={[this.state.currPath]} ref={c => { this.$router = c }}>
          <Route path={'/page1'} component={createPage('page1')}></Route>
          <Route path={'/page2'} component={createPage('page2')}></Route>
          <Route path={'/page3'} component={createPage('page3')}></Route>
        </Router>
      </View>
    )
  }
}

Router

API

Props

| Name | Type | Required | Default | Description | | ---- | ---- | ---- | ---- | ---- | | initialEntries | array | false | ['/'] | 历史栈的初始值 | | initialIndex | number | false | 0 | 初始化位置的历史栈索引 |

Route

API

Props

| Name | Type | Required | Default | Description | | ---- | ---- | ---- | ---- | ---- | | path | string or string[] | false | void | 不设置路径，将总是匹配到它 | | component | ReactComponent | true | null | 路由对应渲染的组件，会多传RouterContext的数据到props | | exact | boolean | false | false | 是否完整匹配path | | strict | boolean | false | false | 路径末端是否不可以加‘/', 设置成true. 路径'/foo/'会匹配不成功 |

RouterContext上下文

Router实例会通过RouterContext与Route.props.component共享数据，具体内容如下：

localtion

位置信息对象

• localtion.hash: string - URL上的哈希片段。
• localtion.key: string - 当前location唯一的key。
• localtion.search: string - URL上的query string, like'?v=asdasd&t=adasa'。
• localtion.pathname: string - URL的路径名称。
• localtion.state: object - 位置对象额外的一些状态（不存在URL中）。

history

历史对象

• history.push(path: string, state?: object) - 往历史栈加入一个新成员，渲染path匹配的组件，state储存于localtion.state字段中，用于组件间的数据传递。
• histroy.replace(path: string) - 替换当前栈路径为path路径。
• histroy.goBack() - 返回上一个栈路径。
• histroy.listen({ location: object, action: string } => {}): removeListenFn - 监听当前位置发生变化，并返回一个移除监听函数。
• histroy.location: localtion - 位置信息对象

match

匹配信息对象

• match.isExact: boolean - 是否是完整匹配
• match.path: string - 匹配的路径片段
• match.url: string - 匹配的URL片段
• match.params: object - 动态路径片段参数键值对，like: /foo/:id/index => {id: 'something'}

QA

Q: 为什么在Web端调了history.push(path)更新了路径，浏览器地址栏URL不会更新？

A: 因为我们需要兼容React Native层面的路由实现，所以我们路由的‘URL’是抽象出来的，跟浏览器地址栏上的URL无关。