`@stackflow/link`

Gatsby (opens in a new tab)나 Next.js (opens in a new tab)에서 제공하는 <Link /> 컴포넌트와 같이 동작해요.

의존성

@stackflow/plugin-history-sync과 @stackflow/plugin-preload이 설정되어 있을 때만 사용할 수 있어요.

설치

npm install @stackflow/link

사용법

stackflow.ts

import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { preloadPlugin } from "@stackflow/plugin-preload";
 
const { Stack, useFlow, activities } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    historySyncPlugin({
      //...
    }),
    preloadPlugin({
      // ...
    }),
    // ...
  ],
});
 
export type TypeActivities = typeof activities;

Link.tsx

import { createLinkComponent } from "@stackflow/link";
import type { TypeActivities } from "./stackflow";
 
export const { Link } = createLinkComponent<TypeActivities>();

MyComponent.tsx

import { Link } from './Link'
 
const MyComponent = () => {
  return (
    <div>
      <Link
        className={...}
        activityName="MyActivity"
        activityParams={{}}
      >
        {/* ... */}
      </Link>
    </div>
  )
}

레퍼런스

Option	Type	Description
activityName	`string`	이동할 액티비티의 이름이에요. 이 속성은 어느 경로로 이동할지를 결정하는 데 사용되어요.
activityParams	`object`	액티비티에 전달될 매개변수예요. 이 매개변수들은 경로 패턴을 채우는 데 사용되어요.
animate	`boolean` (optional)	내비게이션 시 전환 애니메이션을 사용할지를 결정해요. 제공되지 않으면 애니메이션이 없어요.
replace	`boolean` (optional)	true일 경우, 히스토리 스택에서 현재 항목을 대체하고 새로운 항목을 추가하지 않아요.
urlPatternOptions	`UrlPatternOptions` (optional)	URL 패턴 매칭과 채우기를 커스터마이즈할 수 있는 옵션이에요.
ref	`React.ForwardedRef<HTMLAnchorElement>` (optional)	DOM에 직접 접근할 수 있도록 하위 앵커 요소에 대한 참조를 제공해요.
onClick	`function` (optional)	링크의 클릭 이벤트를 처리하는 함수예요. 링크 클릭 시 추가 작업을 수행하는 데 사용해요.
children	`React.ReactNode`	링크 내부에 렌더링할 콘텐츠예요. 주로 사용자와 상호작용할 수 있는 텍스트나 다른 요소예요.

API 파이프라이닝 plugin-basic-ui