Edit in JSFiddle

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

var Inbox = ({ mails }) => (
	<div>
    <NavigationLink stateKey="compose">
      Compose
    </NavigationLink>
    <table>
      <tbody>
        {mails.map(mail => (
          <tr key={mail.id}>
            <td>{mail.from}</td>
            <td>
              <NavigationLink
                stateKey="mail"
                navigationData={{id: mail.id}}>
                {mail.subject}
              </NavigationLink>
            </td>
            <td>{mail.date.toDateString()}</td>
          </tr>
        ))}
      </tbody>
    </table>	  
	</div>
);

var Mail = ({ mail, expand }) => (
  <div>
    <NavigationLink stateKey="inbox">
      Back to Inbox
    </NavigationLink>
    <h1>{mail.subject}</h1>
    <NavigationLink
      stateKey="mail"
      navigationData={{id: mail.id, expand: !expand}}>
      {!expand ? 'Expand' : 'Collapse'} Thread
    </NavigationLink>
    <ul>
      {expand && mail.thread.map((mail, i) => (
        <li key={i}>
          <h2>{mail.from}</h2>
          <p>{mail.content}</p>}
        </li>                
      ))}
      <li key={mail.thread.length}>
        <h2>{mail.from}</h2>
        <p>{mail.content}</p>
      </li>
    </ul>
  </div>
);

var Compose = () => (
	<div>
    <NavigationLink
      stateKey="inbox">
      Back to Inbox
    </NavigationLink>
    <textarea rows="6" cols="60"></textarea>
	</div>
);

var stateNavigator = new StateNavigator([
  {key: 'inbox', route: ''},
  {key: 'mail', route: 'inbox/{id}/{expand?}',
    defaults: {expand: false}, defaultTypes: {id: 'number'}},
  {key: 'compose'},
]);

var {inbox, mail, compose} = stateNavigator.states;

inbox.renderView = function() {
  return <Inbox mails={getMails()} />;
};

mail.renderView = function(data) {
  return (
    <Mail
      mail={getMails()[data.id]}
      expand={data.expand}
    />
  );
};

compose.renderView = function() {
  return <Compose />;
};

stateNavigator.start();

ReactDOM.render(
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationContext.Consumer>
      {({ state, data }) => state.renderView(data)}
    </NavigationContext.Consumer>
  </NavigationHandler>,
  document.getElementById('app')
);

function getMails() {
  return [
    {id: 0, from: 'you@home.com', subject: 'Haven\'t seen you for ages', date: new Date(2016,3,1), content: 'Sure, be great to catch up', thread: [{id: 1, from: 'me@work.com', content: 'Can I come and see you soon?'}]},
    {id: 1, from: 'xxx@scam.com', subject: 'You could win $1,000!', date: new Date(2016,3,2), content: 'Don\'t you want the money?', thread: [{id: 1, from: 'xxx@scam.com', content: 'We just need your bank details'}, {id: 2, from: 'me@work.com', content: 'Please leave me alone'}]},
    {id: 2, from: 'mum@home.com', subject: 'Happy Birthday To You', date: new Date(2016,3,3), content: 'Awww, I thought you\'d forgotten', thread: [{id: 1, from: 'me@work.com', content: 'Many Happy Returns, Mother'}]},
    {id: 3, from: 'agent@agency.com', subject: 'JavaScript Developers Needed', date: new Date(2016,3,4), content: 'Do you know anybody that might be interested?', thread: [{id: 1, from: 'agent@agency.com', content: 'You looking for work?'},{id: 2, from: 'me@work.com', content: 'Nope'}]},
    {id: 4, from: 'you@home.com', subject: 'Great to see you the other day', date: new Date(2016,3,5), content: 'Thanks, I enjoyed it too!', thread: [{id: 1, from: 'me@work.com', content: 'Really enjoyed meeting up the other day!'}]},
    {id: 5, from: 'blah@blah.com', subject: 'Yadda yadda yadda', date: new Date(2016,3,6), content: 'Blah blah blah. Blah blah blah', thread: [{id: 1, from: 'me@work.com', content: 'Yadda yadda yadda'}]},
    {id: 6, from: 'you@home.com', subject: 'Did I leave my bag at yours?', date: new Date(2016,3,7), content: 'Found it. I\'ll bring it round tomorrow', thread: [{id: 1, from: 'me@work.com', content: 'Can\'t find it anywere. Can you have a look around?'}]},
    {id: 7, from: 'you@home.com', subject: 'Thanks for returning my bag', date: new Date(2016,3,8), content: 'No worries, pal', thread: [{id: 1, from: 'me@work.com', content: 'Thanks, I owe you one'}]},
  ];
}
<div id="app"></div>
body {
  font-family: arial, sans-serif;
  font-size: .8em;
  background-color: #fff;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  background-color: rgba(243, 243, 243, 0.85);
  border-bottom: 1px solid rgb(229, 229, 229);
  padding: 5px;
 }
h1 {
  font-size: 1.4em;
  font-weight: normal;
}
h2 {
  font-size: 1em;
}
ul {
  list-style-type: none;
  padding: 0;
}
textarea {
  display: block;
}