react-page

minimalist router for react, based on page.js.

 
var React = require('react')
var page = require('react-page')
 
var Loading = require('./components/Loading')
var Login = require('./components/Login')
var LandingPage = require('./components/LandingPage')
var Settings = require('./components/Settings')
var Profile = require('./components/Profile')
 
var DOM = React.DOM
 
var header = DOM.header.bind(null, null)
var h1 = DOM.h1.bind(null, null)
var section = DOM.section.bind(null, null)
var p = DOM.p.bind(null, null)
var blockquote = DOM.blockquote.bind(null, null)
 
var el = React.createElement
var types = React.PropTypes
 
var Container = React.createClass({
  contextTypes: {
    route: types.object.isRequired,
    childComponent: types.func.isRequired
  },
 
  render: function () {
    return section(
 
      header(
        h1('Your Stupid Brand ™')
      ),
 
      blockquote(
 
        p('please remember this path "' +
          this.context.route.pathname +
          '", forever'
        )
 
      ),
 
      el(this.context.childComponent)
    )
  }
})
 
function render (Root) {
  React.render(el(Root), document.getElementById('app'))
}
 
page('/', Container, LandingPage, render)
 
page('/login', Login, render)
 
page(
  '/settings',
  Container,
  page.when(isLoggedIn, Settings, Login),
  render
)
 
var loadUserData = require('./api/user').load
 
page(
  '/user/:id/profile',
  Container,
  page.when(loadUserData, Profile, ErrorPage, Loading),
  render
)