API
플러그인
plugin-history-sync

@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,
    }),
  ],
});

레퍼런스

OptionTypeDescription
routesobject액티비티와 URL 템플릿을 연결해요. 액티비티의 파라미터를 Path Parameter로 표현할 수 있어요. 만약 액티비티의 파라미터가 해당 URL 템플릿에 없다면 자동으로 Query Parameter로 표현돼요.
fallbackActivity(args: { initialContext: any }) => K첫 진입시에 현재 URL과 매핑되는 URL이 없는 경우 어떤 액티비티로 보낼지 결정해요. 일반적으로 404 페이지를 만들고 여기에 할당해요.
useHashboolean (optional)해시 기반 라우팅을 사용할지를 결정해요. 기본값은 false예요.
historyHistory (optional)네비게이션 상태를 관리하는 데 사용되는 사용자 정의 히스토리 객체예요. 기본적으로 브라우저나 메모리 히스토리예요.
urlPatternOptionsUrlPatternOptions (optional)URL 패턴 매칭 및 생성과 관련된 옵션으로, URL이 어떻게 구성되고 해석되는지에 영향을 줘요.