> For the complete documentation index, see [llms.txt](https://jho406.gitbook.io/breezy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jho406.gitbook.io/breezy/docs/navigation-context.md).

# 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)
```

\- \[:octicons-arrow-right-24: See complete reference]\(reference/types.md#navigationcontextprops) for \`NavigationContext\`

## `navigateTo`

Fundamentally, `visit` is responsible for `fetch`ing a page, [saving](/breezy/docs/reference/index.md#saveandprocesspage) 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:

```javascript
navigateTo('/posts')
```

!!! Note The page must exist in the store, or `navigateTo` will throw a error. Use [copyPage](/breezy/docs/reference/index.md#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](/breezy/docs/reference/index.md#copypage) action.

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

```
import { copyPage, NavigationContext } from '@thoughtbot/superglue'
import { myAppDispatch } from '@myJavascript/store'

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

const nextPageKey = pageKey + "?active=true"
dispatch(copyPage({from: pageKey, to: nextPageKey}))

// 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.

\- \[:octicons-arrow-right-24: See complete reference]\(reference/types.md#navigateto-1) for \`navigateTo\`