Route Interactions

Route interactions are used to interact with routes.

Provided Interactions

The @curi/interactions package provides four interactions: pathname, active, ancestors, and prefetch.

Calling Interactions

All interactions take a route's public data as its first argument. A route's public data can be accessed using the router's route method.

Any additional arguments to a route interaction are up to the interaction. For example, the pathname interaction takes a params object as its second argument, which it uses to generate pathnames for routes that have params.

Interactions are stateless, so they can be imported in whatever module needs to use them.

import { pathname } from "@curi/interactions";
const route = router.route("Home");
const path = pathname(route);

Route Properties

What are the route properties that an interaction can access? There are a number of "base" properties based on the provided route object and its related routes. Additionally, there is a methods group containing some methods for interacting with the route.

Base Properties

A route's meta properties provide information about the route.

name

The route's name string.

keys

An array of the names of params for the route. This includes the names of params for any ancestor routes.

parent

The route's parent's public data. For root routes, this is undefined.

The ancestors interaction uses the parent property to generate an array of a route's ancestors.

children

An array containing the public route data for each of the route's children. In turn, each child's meta.children array contains public route data for its children.

The active interaction walks through a routes tree of descendants when checking if a route is a partial match.

extra

A route's extra property is the optional object of whatever you want to attach to a route using its extra property.

methods

A route's methods properties are functions for interacting with the route.

pathname

A function for generating a pathname string from the route.

The pathname interaction uses this method.

resolve

The route's resolve function (if it exists). This will be undefined if the route is synchronous.

The prefetch interaction uses this method.

respond

The route's respond function (if it exists).

  1. Provided Interactions
  2. Calling Interactions
  3. Route Properties