API
Plugins
plugin-history-sync

@stackflow/plugin-history-sync

Stackflow does not use the browser's history by default. This plugin synchronizes the stack state with the current browser's history.

Installation

npm install @stackflow/plugin-history-sync

Usage

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,
      /**
       * If a URL that does not correspond to the URL template is given, it moves to the `fallbackActivity`.
       */
      fallbackActivity: ({ initialContext }) => "NotFoundPage",
      /**
       * Uses the hash portion of the URL (i.e. window.location.hash)
       */
      useHash: false,
    }),
  ],
});

Reference

OptionTypeDescription
configobjectThe config object created with defineConfig(). Routes are read from the route field of each activity definition.
fallbackActivity(args: { initialContext: any }) => KDetermines which activity to navigate to if there is no matching URL when first entering. Typically, you create a 404 page and assign it here.
useHashboolean (optional)Determines if hash-based routing should be used. Defaults to false.
historyHistory (optional)A custom history object used for managing navigation state. Defaults to browser or memory history.
urlPatternOptionsUrlPatternOptions (optional)Options for URL pattern matching and generation, affecting how URLs are constructed and parsed.