`@stackflow/plugin-history-sync`

stackflow는 기본적으로 브라우저의 히스토리를 사용하지 않아요. 이 플러그인은 stackflow의 상태를 브라우저 히스토리와 동기화해요.

설치

npm install @stackflow/plugin-history-sync

사용법

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyHome",
      route: "/",
    },
    {
      name: "MyArticle",
      route: "/articles/:articleId",
    },
    {
      name: "NotFoundPage",
      route: "/404",
    },
  ],
});

stackflow.ts

import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { config } from "./stackflow.config";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";
 
const { Stack } = stackflow({
  config,
  components: {
    MyHome,
    MyArticle,
    NotFoundPage,
  },
  plugins: [
    // ...
    historySyncPlugin({
      config,
      /**
       * URL 템플릿에 대응하지 않는 URL이 주어지면 `fallbackActivity`로 이동해요.
       */
      fallbackActivity: ({ initialContext }) => "NotFoundPage",
      /**
       * URL의 hash 부분을 사용해요. (예: window.location.hash)
       */
      useHash: false,
    }),
  ],
});

레퍼런스

Option	Type	Description
config	`object`	`defineConfig()`로 생성한 config 객체에요. 각 액티비티 정의의 `route` 필드에서 라우트를 읽어요.
fallbackActivity	`(args: { initialContext: any }) => K`	첫 진입시에 현재 URL과 매핑되는 URL이 없는 경우 어떤 액티비티로 보낼지 결정해요. 일반적으로 404 페이지를 만들고 여기에 할당해요.
useHash	`boolean` (optional)	해시 기반 라우팅을 사용할지를 결정해요. 기본값은 false예요.
history	`History` (optional)	네비게이션 상태를 관리하는 데 사용되는 사용자 정의 히스토리 객체예요. 기본적으로 브라우저나 메모리 히스토리예요.
urlPatternOptions	`UrlPatternOptions` (optional)	URL 패턴 매칭 및 생성과 관련된 옵션으로, URL이 어떻게 구성되고 해석되는지에 영향을 줘요.

plugin-google-analytics-4 plugin-renderer-basic