React-router demo

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="app"></div>
  
    <script src="https://jspm.io/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./index.js');
    </script>
  </body>
</html>

.active-link{ color: red; }

React Router demo

/*global System */
'use strict';

System.config({
  transpiler: "babel",
  packages: {
    './': { defaultExtension: false }
  },
  map: {
    "react": "npm:react@15.2.1",
    "react-dom": "npm:react-dom@15.2.1",
    "react-router": "npm:react-router@2.6.0"
  }
});

import React from 'react';
import { render } from 'react-dom';
import App from './modules/App.js';
import { Router, Route, hashHistory } from 'react-router';

import About from './modules/About.js'
import Contact from './modules/Contact.js'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
), document.getElementById('app'))

import React from 'react'

export default React.createClass({
  render() {
    return <p>About</p>
  }
})

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>My App</h1>
        <ul role="nav">
          <li><Link to="/about" activeClassName="active-link">About</Link></li>
          <li><Link to="/contact" activeClassName="active-link">Contact</Link></li>
        </ul>

        {this.props.children}
      </div>
    )
  }
})

import React from 'react'

export default React.createClass({
  render() {
    return <p>Contact</p>
  }
})