@stackflow/plugin-history-sync
stackflow는 기본적으로 브라우저의 히스토리를 사용하지 않아요. 이 플러그인은 stackflow의 상태를 브라우저 히스토리와 동기화해요.
설치
npm install @stackflow/plugin-history-sync
사용법
stackflow.ts
import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";
const { Stack, useFlow } = stackflow({
activities: {
MyHome,
MyArticle,
NotFoundPage,
},
plugins: [
// ...
historySyncPlugin({
routes: {
/**
* You can link the registered activity with the URL template.
*/
MyHome: "/",
MyArticle: "/articles/:articleId",
NotFoundPage: "/404",
},
/**
* If a URL that does not correspond to the URL template is given, it moves to the `fallbackActivity`.
*/
fallbackActivity: ({ context }) => "NotFoundPage",
/**
* Uses the hash portion of the URL (i.e. window.location.hash)
*/
useHash: false,
}),
],
});
레퍼런스
Option | Type | Description |
---|---|---|
routes | object | 액티비티와 URL 템플릿을 연결해요. 액티비티의 파라미터를 Path Parameter로 표현할 수 있어요. 만약 액티비티의 파라미터가 해당 URL 템플릿에 없다면 자동으로 Query Parameter로 표현돼요. |
fallbackActivity | (args: { initialContext: any }) => K | 첫 진입시에 현재 URL과 매핑되는 URL이 없는 경우 어떤 액티비티로 보낼지 결정해요. 일반적으로 404 페이지를 만들고 여기에 할당해요. |
useHash | boolean (optional) | 해시 기반 라우팅을 사용할지를 결정해요. 기본값은 false예요. |
history | History (optional) | 네비게이션 상태를 관리하는 데 사용되는 사용자 정의 히스토리 객체예요. 기본적으로 브라우저나 메모리 히스토리예요. |
urlPatternOptions | UrlPatternOptions (optional) | URL 패턴 매칭 및 생성과 관련된 옵션으로, URL이 어떻게 구성되고 해석되는지에 영향을 줘요. |