Using Director.js with React.js (uses ES6 extensions)

main.jsx

import router from './router.jsx';

import A from './A.jsx';
import B from './B.jsx';
import C from './C.jsx';

router.on('/a', () => { React.render(<A />, document.body); });
router.on('/b', () => { React.render(<B />, document.body); });
router.on('/c', () => { React.render(<C />, document.body); });
router.init();

router.jsx

// <script src="//cdnjs.cloudflare.com/ajax/libs/Director/1.2.8/director.js"></script>
// Or use npm and "import".

let router = new Router().configure({
  html5history: true,
});
export { router as default };

// Use in place of <a> when the link should not reload the page but simply
// update the route.
export class Link extends React.Component {
  render() {
    return (
      <a onClick={this.handleClick.bind(this)} {...this.props}>
        {this.props.children}
      </a>
    );
  }
  handleClick(e) {
    e.preventDefault();
    router.setRoute(this.props.href);
  }
}