Routing

Connect your view to other views and tasks
The simplest way to create a link from your view to a task or another view is to use the href property on a Button or Link.
The href can navigate to a task by using the syntax href={{ task: my_task }} or to a view by using the syntax href={{ view: my_view }}.
You can also add parameters to the task or view by including the params field. For example, if you have a task that takes a name parameter, you can set the params field to { name: "Sarah" } and the task will be opened with name pre-filled to "Sarah".
tsx
Copied
1
<Button href={{ task: "my_task" }}>Navigate to my_task</Button>
2
<Button href={{ task: "my_task", params: { name: "Sarah" } }}>
3
  Navigate to my_task with parameters
4
</Button>
5
<Link href={{ task: "my_task" }}>Navigate to my_task</Link>

View parameters
View parameters are inputs to a view that allow users to pass in data to the view. View parameters are passed to a view as a prop called params in the top-level View component.
tsx
Copied
1
import { Text } from "@airplane/views";
2
import airplane from "airplane";
3


4
const MyView = ({ params }) => {
5
  return <Text>Hello {params.name}</Text>;
6
};
7


8
export default airplane.view({ slug: "my_view" }, MyView);
The parameter state is encoded in the URL as query parameters so that users can easily share links to views with input data.
View parameters are useful since they allow you to share views in certain states. For example, say we have a View with a form. We want to share this view with a link that has the form pre-filled. We can do this by adding parameters to the view that represents the form data.
tsx
Copied
1
import { Form, TextInput } from "@airplane/views";
2
import airplane from "airplane";
3


4
const CatForm = ({ params }) => {
5
  const { name, breed = "Domestic short hair" } = params;
6
  return (
7
    <Form>
8
      <TextInput id="name" label="Name" defaultValue={name} />
9
      <TextInput id="breed" label="Breed" defaultValue={breed} />
10
    </Form>
11
  );
12
};
13


14
export default airplane.view({ slug: "cat_form" }, CatForm);
We can then use https://app.airplane.dev/views/vew123?name=Felix to link to the form with the name set to "Felix" and breed set to the default breed "Domestic short hair".
We can also link to this view with parameters from a view by using the routing technique described in Navigation.

Peek
Another way to link to a task or a view is through a peek. A peek is a way to open a task or view without leaving the current view. Peeking opens an overlay on the right side of the current view.
You can open a task or view peek by calling router.peek. The peek function takes an object with a task or view field representing the slug of the task or view to peek.
tsx
Copied
1
import { useRouter } from "@airplane/views";
2


3
const FeatureFlagDashboard = () => {
4
  const router = useRouter();
5
  return (
6
    {/* ... */}
7
    <Button onClick={() => router.peek({ task: "create_feature" })}>Create feature</Button>
8
    {/* ... */}
9
  );
10
};
You can also pass Task params or Views params to the peek by including a params field in the peek argument. This will pre-fill the peeked task with the given parameters or pass the parameters to the peeked view.
tsx
Copied
1
<Button onClick={() => router.peek({ task: "create_feature", params: { name: "Delete user" } })}>
2
  Create feature
3
</Button>

Router
The useRouter hook provides access to the router. The router contains low-level methods for linking and navigating between your view and other views and tasks. These functions can be used when you want finer control over your view's routing behavior.
For example, you may want to programmatically navigate to a view or task in your custom component, which you can accomplish by using router.navigate.
tsx
Copied
1
const router = useRouter();
2
return (
3
  <button
4
    onClick={() => {
5
      router.navigate({ task: "my_task" });
6
    }}
7
  >
8
    Navigate to my_task
9
  </button>
10
);
Or, you may want to programmatically open a view or task in a new tab, which you accomplish do by using router.getHref.
tsx
Copied
1
const router = useRouter();
2
return (
3
  <button
4
    onClick={async () => {
5
      const href = await router.getHref({ task: "my_task" });
6
      window.open(href, "_blank");
7
    }}
8
  >
9
    Open my_task in a new tab
10
  </button>
11
);

API reference

 
tsx
Copied
1
const { params, navigate, getHref, peek } = useRouter();

Returns
params
Record<string, string | undefined>

The parameters passed to this view.

navigate
(params: NavigateParams) => Promise<void>
Navigate to a task or view.
NavigateParams is either:
  • { task: string, params?: Params } to navigate to a task
  • { view: string, params?: Params } to navigate to another view
  • { params?: Params } to navigate to the current view
getHref
(params: GetHrefParams) => Promise<string>
Get a href string that navigates to a task or view.
GetHrefParams is either:
  • { task: string, params?: Params } to get a href for a task
  • { view: string, params?: Params } to get a href for a view
  • { params?: Params } to get a href for the current view
peek
(params: PeekParams) => void
Open a peek to a task or view.
PeekParams is either:
  • { task: string, params?: Params } to peek at a task
  • { view: string, params?: Params } to peek at a view
PrivacyTermsSupport