Skip to content

NavigationContext

In addition to visit and remote, the NavigationContext provides a few other methods and properties that are best decribed in the context of navigateTo.

import { NavigationContext } from '@thoughtbot/superglue'

const {
  navigateTo,
  visit,
  remote,
  pageKey,
  search
} = useContext(NavigationContext)

Fundamentally, visit is responsible for fetching a page, saving it, and lastly use navigateTo to load the page, update the url, and swap the page component. The NavigationContext exposes navigateTo for you to use use independently. For example:

navigateTo('/posts')

Note

The page must exist in the store, or navigateTo will throw a error. Use [copyPage] to prepopulate before navigating.

navigateTo is especially useful for optimistic navigation like local facted search and works best when combined with search and pageKey from the same NavigationContext, and the [copyPage] action.

In this example, we'll assume we're on pageKey "/posts":

import { NavigationContext } from '@thoughtbot/superglue'

// In your component somewhere
const {
  navigateTo,
  pageKey,
  search
} = useContext(NavigationContext)

const nextPageKey = pageKey + "?active=true"

// On a click handler
navigateTo(nextPageKey, { action: 'push'})

// later after navigation.
console.log(search) // would return {active: "true"}

With the above, we're able to make use of the URL search param as a source of state. And by using navigateTo, we're able to filter local results while updating the URL.