Edit in JSFiddle

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

var Pager = ({page, size, total}) => {
  var pages = [
    {text: 'First', page: 1},
    {text: 'Previous', page: Math.max(page - 1, 1)},
    {text: 'Next', page: Math.min(page + 1, Math.ceil(total / size))},
    {text: 'Last', page: Math.ceil(total / size)}
  ];
  return (
    <div>
      {pages.map(pageInfo =>
        <RefreshLink 
          navigationData={{page: pageInfo.page}}
          disableActive={true}
          key={pageInfo.text}>
          {pageInfo.text}
        </RefreshLink>
      )}
    </div>
  );
};

var List = ({page, size, items}) => {
  var pageOfItems = items.slice((page - 1) * size, page * size);
  return (
    <div>
      <ul>{pageOfItems.map(item => <li key={item}>{item}</li>)}</ul>
      <Pager page={page} total={items.length} size={size} />
    </div>
  );
};

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

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

stateNavigator.states.list.renderView = (data) => (
  <List page={data.page} size={4} 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
}

a, span{
  margin-right:5px;
}