@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-syncUsage
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
| Option | Type | Description |
|---|---|---|
| config | object | The config object created with defineConfig(). Routes are read from the route field of each activity definition. |
| fallbackActivity | (args: { initialContext: any }) => K | Determines which activity to navigate to if there is no matching URL when first entering. Typically, you create a 404 page and assign it here. |
| useHash | boolean (optional) | Determines if hash-based routing should be used. Defaults to false. |
| history | History (optional) | A custom history object used for managing navigation state. Defaults to browser or memory history. |
| urlPatternOptions | UrlPatternOptions (optional) | Options for URL pattern matching and generation, affecting how URLs are constructed and parsed. |