히스토리와 동기화하기

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

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

$ yarn add @stackflow/plugin-history-sync

설치가 완료되면 다음과 같이 stackflow() 함수의 plugins 필드에 플러그인을 등록해요.

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import MyActivity from "./MyActivity";
import Article from "./Article";

const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {
    MyActivity,
    Article,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
    historySyncPlugin({
      routes: {
        MyActivity: "/my-activity",
        Article: "/articles/:articleId",
      },
      fallbackActivity: () => "MyActivity",
    }),
  ],
  // historySyncPlugin이 해당 옵션을 덮어쓰므로 initialActivity는 더 이상 작동하지 않아요.
  // initialActivity: () => "MyActivity",
});

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

• routes - 액티비티와 URL 템플릿을 연결해요. 액티비티의 파라미터를 Path Parameter로 표현할 수 있어요. 만약 액티비티의 파라미터가 해당 URL 템플릿에 없다면 자동으로 Query Parameter로 표현돼요.

• fallbackActivity - 첫 진입시에 현재 URL과 매핑되는 URL이 없는 경우 어떤 액티비티로 보낼지 결정해요. 일반적으로 404 페이지를 만들고 여기에 할당해요.

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