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".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 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};
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.API reference
tsxCopied1const { 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 }
to peek at a task{ view: string }
to peek at a view