Edit in JSFiddle

var {StateNavigator} = Navigation;
var {NavigationHandler, NavigationContext, RefreshLink} = NavigationReact;

var Sorter = ({up, children}) => (
  <RefreshLink navigationData={{up: !up}}>
    {children}
  </RefreshLink>
);

var List = ({up, items}) => {
  items.sort();
  if (!up) items.reverse();
  return (
    <div>
      <Sorter up={up}>Sort</Sorter>
      <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
    </div>
  )
};

var stateNavigator = new StateNavigator([
  {key: 'list', route: '{up?}', defaults: {up: true}}
]);

var ITEMS = ['carrots', 'apples', 'cherries', 'potatoes', 'oranges', 'peas', 'mushrooms', 'grapes', 'pineapples'];

stateNavigator.states.list.renderView = (data) => (
  <List up={data.up} items={ITEMS} />
);

stateNavigator.start();

ReactDOM.render(
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationContext.Consumer>
      {({ state, data }) => state.renderView(data)}
    </NavigationContext.Consumer>
  </NavigationHandler>,
  document.getElementById('container')
);
<div id="container"></div>
body {
    padding: 20px
}