rax-link

rax-link

不推荐使用，建议 Web 场景使用 a 标签，小程序场景使用 navigator 标签

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

Link 是基础的链接组件，同 a 标签。它带有默认样式 textDecoration: 'none'。 在浏览器中，同我们熟悉的 a 标签，使用 Link 标签并不能新开一个 webview ，它只是在当前的 webview 中做页面的跳转。

安装

$ npm install rax-link --save

属性

小程序中需要通过 miniappHref 传递参数支持跳转，参数以“跳转类型:目标页面路径”格式传递，跳转类型支持：

• navigate（默认值）：从当前页面，跳转到应用内的某个指定页面
  • 需要跳转的应用内非 tabbar 的目标页面路径 ,路径后可以带参数
  • 参数规则：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔
  • 示例： path?key1=value1&key2=value2
• redirect：关闭当前页面，跳转到应用内的某个指定页面
  • 需要跳转的应用内非 tabbar 的目标页面路径 ,路径后可以带参数
  • 参数规则：路径与参数之间使用?分隔，参数键与参数值用 = 相连，不同参数必须用&分隔
  • 示例：path?key1=value1&key2=value2
• switchTab：跳转到指定标签页（tabbar）页面，并关闭其他所有非标签页页面
  • 跳转的标签页的路径（需在 app.json 的 tabbar 字段定义的页面）
  • 注意：路径后不能带参数。
• navigateBack：关闭当前页面，返回上一级或多级页面
  • 与前面三种路由方式不同，navigateBack 跳转类型对应的 miniappHref 参数的格式中目标页面路径部分所对应的是返回的页面数（例如：navigateBack:1 表示返回上一级），如果返回的页面数大于现有打开的页面数，则返回到首页。

属性	类型	默认值	必填	描述	支持
onClick	function	-	false	节点被点击之后触发
href	string	-	true	跳转目标地址
miniappHref	string	-	true	跳转类型:目标页面路径

示例

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Link from 'rax-link';
import Text from 'rax-text';

render(
  <Link
    href={'//www.taobao.com'}
    miniappHref={'/pages/Home/index'}
    onClick={e => {
      console.log(e);
    }}
  >
    <Text
      style={{
        fontSize: 14,
        color: '#333333',
      }}
    >
      点击跳转
    </Text>
  </Link>,
  document.body,
  { driver: DriverUniversal },
);