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

Reference

OptionTypeDescription
routesobjectConnects activities with URL templates. You can represent activity parameters as Path Parameters. If an activity's parameter is not in the URL template, it will automatically be represented as a Query Parameter.
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.