rax-link

Link component for Rax.

Usage no npm install needed!

<script type="module">
  import raxLink from 'https://cdn.skypack.dev/rax-link';
</script>

README

rax-link

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

npm

支持

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.jsontabbar 字段定义的页面)
    • 注意:路径后不能带参数。
  • navigateBack:关闭当前页面,返回上一级或多级页面
    • 与前面三种路由方式不同,navigateBack 跳转类型对应的 miniappHref 参数的格式中目标页面路径部分所对应的是返回的页面数(例如:navigateBack:1 表示返回上一级),如果返回的页面数大于现有打开的页面数,则返回到首页。
属性 类型 默认值 必填 描述 支持
onClick function - false 节点被点击之后触发 browser Weex miniApp wechatMiniprogram bytedanceMicroApp quickApp
href string - true 跳转目标地址 browser Weex quickApp
miniappHref string - true 跳转类型:目标页面路径 miniApp wechatMiniprogram bytedanceMicroApp

示例

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 },
);