Morearty & React Router example

app.jsx

/**
 * This example shows using Morearty and React Router together in a single app.
 * 
 * Both libraries expect to be the 'top-level-item' by default, which causes conflict.
 * The `currentRoute` here is especially important, as this allows the components to re-render
 * when the Route changes. Without this the `shouldComponentUpdate` of Morearty will
 * return `false`, preventing routing.
 * 
 * Morearty - https://github.com/moreartyjs/moreartyjs
 * React Router - https://github.com/rackt/react-router
 */

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var Link = Router.Link;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var Morearty = require('morearty');

var state = {
  initialState: {
    'name': 'FooBar',
    'foo': 'Foo',
    'bar': 'Bar',
    'baz': 'Baz'
  }
};

var Ctx = Morearty.createContext(state);

var Home = React.createClass({
  mixins: [Morearty.Mixin],

  render: function() {
    var binding = this.getDefaultBinding();
    return (
      <div>
        <h1>- {binding.get('name')} -</h1>
        <Link to="home">Foo</Link>
        <Link to="bar">Bar</Link>
        <Link to="baz">Baz</Link>
        <RouteHandler binding={binding}/>
      </div>
    );
  }
});

var NestedRouteComponent = React.createClass({
  mixins: [Morearty.Mixin],

  render: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();
    return (
      <div>
        <h2>Path: {metaBinding.get('currentPath')}</h2>
        <RouteHandler binding={binding}/>
      </div>
    );
  }
});

var Foo = React.createClass({
  mixins: [Morearty.Mixin],

  render: function() {
    var binding = this.getDefaultBinding();
    return <div>Foo {binding.get('foo')}!</div>;
  }
});

var Bar = React.createClass({
  mixins: [Morearty.Mixin],

  render: function() {
    var binding = this.getDefaultBinding();
    return <div>Bar {binding.get('bar')}!</div>;
  }
});

var Baz = React.createClass({
  mixins: [Morearty.Mixin],

  render: function() {
    var binding = this.getDefaultBinding();
    return <div>Baz {binding.get('baz')}!</div>;
  }
});

var routes = (
  <Route path="/" name="home" handler={Home}>
    <DefaultRoute handler={Foo}/>
    <Route name="middle" path="middle" handler={NestedRouteComponent}>
      <Route name="bar" path="bar" handler={Bar}/>
      <Route name="baz" path="baz" handler={Baz}/>
    </Route>
  </Route>
);

var App = React.createClass({
  mixins: [Morearty.Mixin],

  componentWillMount: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();

    Router.run(routes, function(Handler, state) {
      metaBinding.set('Handler', Handler);
      metaBinding.set('currentPath', state.path);
    });
  },

  render: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();
    var Handler = metaBinding.get('Handler');

    return Handler ? <Handler binding={binding}/> : null;
  }
});

var Bootstrap = Ctx.bootstrap(App);

React.render(<Bootstrap/>, document.getElementById('root'));

Hi, Ashley. Just made extended example based on your gist. Thanks for providing this code.