React

State Navigation

Defining States

The Navigation router helps you navigate between scenes (or pages) in your application. After following the Setup instructions, you end up with a StateNavigator that accepts an array of States that represent the scenes in your application. Assign the empty route to the State you want to show when the application first loads. You can put off assigning the other routes until your application is up and running. In an email application we might have States representing the inbox and the scenes for reading and writing an email.

const stateNavigator = new StateNavigator([
  {key: 'inbox', route: ''},
  {key: 'mail'},
  {key: 'compose'}
]);

Creating Scenes

Each State needs a matching scene. Imagine we've already written Inbox and Compose components for the two scenes. We wrap them in SceneView components and map them to States via the active prop. The SceneView only renders the child scene when the matching State is active.

import {SceneView} from 'navigation-react';

<NavigationHandler stateNavigator={stateNavigator}>
  <SceneView active="inbox"><Inbox /></SceneView>
  <SceneView active="compose"><Compose /></SceneView>
</NavigationHandler>

Navigating

States become active when you navigate to them. One way to navigate to a State is with a Hyperlink. The Navigation router encourages you to think about scenes rather than Urls. You can build Hyperlinks using the NavigationLink component, passing in the destination State via the stateKey prop.

import {NavigationLink} from 'navigation-react'

<NavigationLink stateKey="compose">
  Compose Mail
</NavigationLink>

When Hyperlinks aren't appropriate, you can navigate programmatically by passing the State key into the navigate function on the stateNavigator. You can access the stateNavigator from the NavigationContext.

import {NavigationContext} from 'navigation-react'

const {stateNavigator} = useContext(NavigationContext);

<div onClick={() => stateNavigator.navigate('compose')}>
  Compose Mail
</div>