@stackflow/link

It mimics the <Link /> component behavior provided by Gatsby or Next.js.

Dependencies

It can be used only when both @stackflow/plugin-history-sync and @stackflow/plugin-preload are set.

• @stackflow/plugin-history-sync
• @stackflow/plugin-preload

Usage

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { preloadPlugin } from "@stackflow/plugin-preload";

const { Stack, useFlow, activities } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    historySyncPlugin({
      //...
    }),
    preloadPlugin({
      // ...
    }),
    // ...
  ],
});

export type TypeActivities = typeof activities;

/**
 * Link.ts
 */
import { createLinkComponent } from "@stackflow/link";
import type { TypeActivities } from "./stackflow";

export const { Link } = createLinkComponent<TypeActivities>();

/**
 * MyComponent.ts
 */
import { Link } from './Link'

const MyComponent = () => {
  return (
    <div>
      <Link
        className={...}
        activityName="MyActivity"
        activityParams={{}}
      >
        {/* ... */}
      </Link>
    </div>
  )
}