@stackflow/link
Gatsby (opens in a new tab)나 Next.js (opens in a new tab)에서 제공하는 <Link /> 컴포넌트와 같이 동작해요.
의존성
@stackflow/plugin-history-sync이 설정되어 있을 때만 사용할 수 있어요.
설치
npm install @stackflow/link사용법
@stackflow/link에서 Link를 직접 import해요.
MyComponent.tsx
import { Link } from "@stackflow/link";
const MyComponent = () => {
return (
<div>
<Link
activityName="MyActivity"
activityParams={{}}
>
{/* ... */}
</Link>
</div>
)
}레퍼런스
| Option | Type | Description |
|---|---|---|
| activityName | string | 이동할 액티비티의 이름이에요. 이 속성은 어느 경로로 이동할지를 결정하는 데 사용되어요. |
| activityParams | object | 액티비티에 전달될 매개변수예요. 이 매개변수들은 경로 패턴을 채우는 데 사용되어요. |
| animate | boolean (optional) | 내비게이션 시 전환 애니메이션을 사용할지를 결정해요. 제공되지 않으면 기본 전환을 사용해요. |
| replace | boolean (optional) | true일 경우, 히스토리 스택에서 현재 항목을 대체하고 새로운 항목을 추가하지 않아요. |
| ref | React.RefObject<HTMLAnchorElement> (optional) | DOM에 직접 접근할 수 있도록 하위 앵커 요소에 대한 참조를 제공해요. |
| onClick | function (optional) | 링크의 클릭 이벤트를 처리하는 함수예요. 링크 클릭 시 추가 작업을 수행하는 데 사용해요. |
| children | React.ReactNode | 링크 내부에 렌더링할 콘텐츠예요. 주로 사용자와 상호작용할 수 있는 텍스트나 다른 요소예요. |