Navigation Example

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://grahammendick.github.io/navigation/download/navigation-3.0.0.min.js"></script>
<script src="https://grahammendick.github.io/navigation/download/navigation.react-2.0.3.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

CSS

body {
    padding:20px
}
table, th, td {
   border:1px solid black;
}
th, td{
  padding:0 4px;
}

JavaScript 1.7

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var People = ({people, stateNavigator}) => (
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Date of Birth</th>
      </tr>
    </thead>
    <tbody>
      {people.map(person => (
        <tr key={person.name}>
          <td>
            <NavigationLink
              stateKey="person"
              navigationData={{id: person.id}}
              stateNavigator={stateNavigator}>
              {person.name}
            </NavigationLink>
        </td>
          <td>{person.dateOfBirth}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dateOfBirth: this.getPerson(props).dateOfBirth};
    this.handleChange = this.handleChange.bind(this);
  }
  getPerson(props) {
    var {people, id} = props;
    return people.filter((person) => person.id === id)[0];
  }
  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }
  render() {
    var {id, expand, stateNavigator} = this.props;
    var person = this.getPerson(this.props);
    return (
      <div>
        <h2>{person.name}</h2>
        <input
          type="text"
          name="dateOfBirth"
          value={this.state.dateOfBirth}
          onChange={this.handleChange} />
        <h3>
          <NavigationLink
            stateKey="person"
            navigationData={{id: id, expand: !expand}}
            stateNavigator={stateNavigator}>
            Hobbies
          </NavigationLink>    
        </h3>
        {expand ? <textarea
          rows="4"
          name="hobbies"
          value={this.state.hobbies}
          onChange={this.handleChange} /> : null}
      </div>
    );
  }
}

var stateNavigator = new StateNavigator([
  {key: 'people', route: ''},
  {key: 'person', route: 'edit/{id}+/hobbies/{expand}', 
    defaults: {expand: false}, defaultTypes: {id: 'number'}}
]);

var PEOPLE = [
 ...