히스토리와 동기화하기

Stackflow의 네비게이션 로직은 기본적으로 브라우저 히스토리에 의존하지 않아요. History API가 존재하지 않는 React Native, NativeScript 등의 환경에 대응하기 위해서에요. 따라서 브라우저 히스토리를 탐험에 사용하기 위해서는 스택 상태를 브라우저 히스토리와 동기화해줄 필요가 있어요. 해당 기능은 @stackflow/plugin-history-sync가 지원해요.

다음 명령어를 통해 @stackflow/plugin-history-sync를 설치해요.

npm install @stackflow/plugin-history-sync

설치가 완료되면 stackflow.config.ts에 라우트를 선언하고, stackflow()에 플러그인을 등록해요.

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
      route: "/my-activity",
    },
    {
      name: "Article",
      route: "/articles/:articleId",
    },
  ],
  transitionDuration: 350,
});

stackflow.ts

import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
import Article from "./Article";
 
const { Stack } = stackflow({
  config,
  components: {
    MyActivity,
    Article,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
    historySyncPlugin({
      config,
      fallbackActivity: () => "MyActivity",
    }),
  ],
});

historySyncPlugin은 config와 fallbackActivity 두 옵션을 받아요.

Option	Type	Description
config	`object`	`defineConfig()`로 생성한 config 객체에요. 각 액티비티 정의의 `route` 필드에서 라우트를 읽어요.
fallbackActivity	`function`	첫 진입시에 현재 URL과 매핑되는 URL이 없는 경우 어떤 액티비티로 보낼지 결정해요. 일반적으로 404 페이지를 만들고 여기에 할당해요.

⚠️

주의 - Activity parameter가 Path parameter와 매핑할때, 넘어갈 수 있는 파라미터 값들이 URL-safe 한지 확인이 필요해요. 만약 URL-safe 하지 않은 특수문자를 사용하는 경우 query parameter가 중복해서 나타날 수 있어요.

⚡️

서버사이드 렌더링 환경에서는 window.location 값이 없으므로 초기 액티비티를 결정할 수 없어요. 초기 액티비티를 결정하려면 다음과 같이 Stack의 initialContext에 req.path 필드에 path 값을 넣어주세요.

<Stack initialContext={{ req: { path: "/..." } }} />

플러그인 작성하기 Loader API