@ @ fast-link/ react

@fast-link/react 绑定 a @fast-link/core 对反应拥有的控制器 锚地或导航区域。 当应用程序或框架适配器时使用 需要自己的路线政策.

Next.js App 路由器应用程序,请使用 @fast-link/next 换句话说.

关于新闻界的时间安排和选择退出,见 何时使用快链接。 。 。 .

要求WCAG A级或AA级兼容的站点应当使快链接失效. 见 无障碍限制。 。 。 .

所需资源

支持Node.js 22 或后期,与 React 19 ()>=19 <20) (中文(简体) ).

安装软件包

npm install @fast-link/react

这个 快链接代理技能 列入 skills/fast-link/SKILL.md。 。 。 .

绑定导航到反应区域

导航从按下开始,在点击处理器可以取消之前. 保持链接 需要确认、发布时间检查或预期 URL 拖曳本地 通过添加 data-no-fast-link 到锚上.

useFastLink 返回 。 将两个都分开 锚或含有锚的元素,取自其其他道具:

'use client';

import { useFastLink } from '@fast-link/react';
import type { ReactNode } from 'react';

export function AppRegion({
  children,
  route,
}: {
  children: ReactNode;
  route: (destination: URL) => void;
}) {
  const attach = useFastLink<HTMLDivElement>({
    navigate: ({ url }) => route(url),
  });

  return (
    <div {...attach} style={{ display: 'contents' }}>
      {children}
    </div>
  );
}

主要鼠标在区域内的导航现在调用 route 打开 pointerdown。 。 。 . 意图提供了源锚,它的作者 href和解决 原产地 URL。应用程序处理路由、历史、滚动、路由 状态和过渡.

包件不做包装并导入路由器 。 这个 display: contents 示例中的元素属于应用程序.

useFastLink 参考文献

function useFastLink<T extends HTMLElement = HTMLElement>(
  options: FastLinkOptions & {
    forwardedRef?: ForwardedRef<T>;
    onClickCapture?: MouseEventHandler<T>;
  },
): {
  ref: (element: T | null) => void;
  onClickCapture: MouseEventHandler<T>;
};

科雷尔 onFastNavigate 遵守已接受的意向 navigate;无法 通过返回值取消导航或 preventDefault()如果它抛出, navigate 仍然运行,然后错误会浮出水面。 导航错误优先 如果两个回调都投出。 后续点击仍然被压制.

返回对象, ref, 和捕获处理器是稳定的. 通过呼叫器抓取 处理器通过 onClickCapture;钩子在压制后运行,即使当 键。 传播约束物最后保留了这种构成. 仅一个参考者无法压制被后人React捕获所阻止的点击.

DOM子树内的地方区域,包括门户和阴影 树 单是反应祖先并不能扩展一个地区的DOM范围.

了解钩子的生命周期

React 管理附在接收返回的 ref 元素上的控制器 :

Attach root
  -> create controller

Commit options
  -> replace every copied option
  -> keep pending click

Remove root or unmount
  -> destroy controller

Replace root
  -> destroy old controller
  -> create new controller

• 将控制器清除等待点击状态, 并删除听众 .
• 强制调用器 - ref 更改在指派前运行旧调试器的清理 新书.
• 服务器渲染不附加控制器 .
• 在被接受后, 匹配指针点击被默认防止 继续传播.
• 触摸、笔接、键盘和修改过的点击保持其原生行为 不打电话 navigate。 。 。 .

核心拥有 资格、点击压制和事件排序。 。 。 . 添加 data-no-fast-link 当浏览器必须保留时, 发送到锚或后人 互动.

相关软件包

• @fast-link/core 文档资格、控制器选项和适配器决定.
• @fast-link/next 提供App路由器组件和一个自定义的发车钩.