Navigating Activities

If you have successfully registered an activity, it's time to navigate between activities. Stackflow supports stacking, replacing, and deleting activities through useFlow(). Let's take a look!

Stacking a New Activity

We use the useFlow() hook created in stackflow.ts. Through the push() function within this hook, we can stack a new activity as follows.

MyActivity.tsx

import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const { push } = useFlow();
 
  const onClick = () => {
    push("Article", {
      title: "Hello",
    });
  };
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

push() takes the name of the activity to navigate to as the first parameter, the parameters for the activity as the second parameter, and additional options as the third parameter. The third parameter, additional options, is optional and can be omitted (default values will be used).

push("activity_name", {
  /* activity parameters */
});
 
// or
push(
  "activity_name",
  {
    /* activity parameters */
  },
  {
    /* additional options */
  },
);

The third parameter of the push() function, additional options, includes the following values.

Option	Type	Description	Default
animate	`boolean`	Turn on or off animation	true

💡

By utilizing TypeScript, you can ensure that activity names and parameters are strictly typed. Use TypeScript to safely and conveniently leverage Stackflow.

Replacing the Current Activity

Next, let's look at how to replace the current activity without adding a new activity to the stack. Using the replace() function from the useFlow() hook created in stackflow.ts, you can replace the current activity as follows.

MyActivity.tsx

import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

replace() has a similar API to push(). It takes the name of the activity to navigate to as the first parameter, the parameters for the activity as the second parameter, and additional options as the third parameter. The third parameter, additional options, is optional and can be omitted (default values will be used).

replace("activity_name", {
  /* activity parameters */
});
 
// or
replace(
  "activity_name",
  {
    /* activity parameters */
  },
  {
    /* additional options */
  },
);

The third parameter of the replace() function, additional options, includes the following values.

Option	Type	Description	Default
animate	`boolean`	Turn on or off animation	true

Deleting the Current Activity

Finally, let's look at how to delete the current activity and return to the previous activity. Using the pop() function from the useFlow() hook created in stackflow.ts, you can delete the current activity as follows.

Article.tsx

import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
type ArticleParams = {
  title: string;
};
 
const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
  const { pop } = useFlow();
 
  const goBack = () => {
    // Pop a single activity
    pop();
  };
 
  const goBackMultiple = () => {
    // Pop multiple activities
    pop(3);
  };
 
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
        <button onClick={goBack}>Back</button>
        <button onClick={goBackMultiple}>Back 3 Steps</button>
      </div>
    </AppScreen>
  );
};
 
export default Article;

pop() takes optional parameters for the number of stacks to pop and additional options. These parameters can be omitted, and default values will be used.

pop(); // pop a single stack
 
pop(3); // pop multiple stacks
 
pop({
  /* additional option */
}); // pop a single stack with additional options
 
pop(3, {
  /* additional option */
}); // pop multiple stacks with additional options

The first parameter of the pop() function can specify the number of stacks to pop or define additional options. If the first parameter is used for the number of stacks, the second parameter can then be used to provide additional options.

The additional options include the following values.

Option	Type	Description	Default
animate	`boolean`	Turn on or off animation	true

We have learned how to stack, replace, and delete activities. Now, let's learn how to create a virtual stack within an activity.

Activity Navigating Step