React

Current Data

Refreshing

You've seen how the Navigation router helps you pass data between different scenes in your application. But, you often want to pass data without changing scene. You can build Hyperlinks that change data without changing scene using the RefreshLink component. It's similar to the NavigationLink component except there's no stateKey prop, because the destination scene always matches the current one.

In the email example, when the user opens an email we can add a Hyperlink that expands the mail so they can view the full conversation. When they click the Hyperlink, we change the expand data item to true and stay on the 'mail' scene. Because we’re not changing scene, we use the RefreshLink component to build the Hyperlink.

import {RefreshLink} from 'navigation-react';

<RefreshLink navigationData={{id: 12, expand: true}}>
  Expand Thread
</RefreshLink>

Alternatively, you can programmatically pass the new data into the refresh function on the stateNavigator.

import {NavigationContext} from 'navigation-react';

const {stateNavigator} = useContext(NavigationContext);

<div onClick={() => stateNavigator.refresh({id: 12, expand: false})}>
  Expand Thread
</div>

Remembering Data

When you navigate to the same scene, you often want to keep most of the current data unchanged. Instead of manually passing all these current data values into the navigationData prop, you can get the RefreshLink component to remember them for you. When you set includeCurrentData to true, the RefreshLink adds the current data to your navigation data and builds the Hyperlink out of the combined data. In the email example, the Hyperlink that expands the email must remember the current email id. We set includeCurrentData to true so we only have to pass the new expand value into the navigation data.

<RefreshLink 
  navigationData={{expand: true}}
  includeCurrentData={true}>
  Expand Thread
</RefreshLink>