Routing
Connect your view to other views and tasks
Navigation
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".tsxCopied1<Button href={{ task: "my_task" }}>Navigate to my_task</Button>2<Button href={{ task: "my_task", params: { name: "Sarah" } }}>3Navigate to my_task with parameters4</Button>5<Link href={{ task: "my_task" }}>Navigate to my_task</Link>
tsxCopied1<Button href={{ view: "my_view" }}>Navigate to my_view</Button>2<Button href={{ view: "my_view", params: { name: "Sarah" } }}>3Navigate to my_view with parameters4</Button>5<Link href={{ view: "my_view" }}>Navigate to my_view</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.tsxCopied1import { Text } from "@airplane/views";2import airplane from "airplane";34const MyView = ({ params }) => {5return <Text>Hello {params.name}</Text>;6};78export 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.
tsxCopied1import { Form, TextInput } from "@airplane/views";2import airplane from "airplane";34const CatForm = ({ params }) => {5const { name, breed = "Domestic short hair" } = params;6return (7<Form>8<TextInput id="name" label="Name" defaultValue={name} />9<TextInput id="breed" label="Breed" defaultValue={breed} />10</Form>11);12};1314export 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.
tsxCopied1import { useRouter } from "@airplane/views";23const FeatureFlagDashboard = () => {4const router = useRouter();5return (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.tsxCopied1<Button onClick={() => router.peek({ task: "create_feature", params: { name: "Delete user" } })}>2Create feature3</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 use
router.navigate
to navigate to a view or task in your custom
component rather than using the included Views Button
or Link
components.tsxCopied1const router = useRouter();2return (3<button4onClick={() => {5router.navigate({ task: "my_task" });6}}7>8Navigate to my_task9</button>10);
API reference
tsxCopied1const { params, navigate, getHref, peek } = useRouter();
Returns
params
The parameters passed to this view.
navigate
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
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
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