It mimics the <Link /> component behavior provided by Gatsby or Next.js.
It can be used only when both @stackflow/plugin-history-sync and @stackflow/plugin-preload are set.
@stackflow/plugin-history-sync@stackflow/plugin-preload
/**
* stackflow.ts
*/
import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { preloadPlugin } from "@stackflow/plugin-preload";
const activities = {
// ...
};
const { Stack, useFlow } = stackflow({
activities,
plugins: [
historySyncPlugin({
//...
}),
preloadPlugin({
// ...
}),
// ...
],
});
export type TypeActivities = typeof activities;/**
* Link.ts
*/
import { createLink } from "@stackflow/link";
import type { TypeActivities } from "./stackflow";
export const { Link } = createLink<TypeActivities>();/**
* MyComponent.ts
*/
import { Link } from './Link'
const MyComponent = () => {
return (
<div>
<Link
className={...}
activityName="MyActivity"
activityParams={{}}
>
{/* ... */}
</Link>
</div>
)
}