score:1

  var baseview = react.createclass({
    pathtocomponent: function(){
        var paths = {
             'home': contenthome,
             'login': contentlogin
        };
        return paths[path] || content404
    },
    render: function() {
      var contentcomponent = this.pathtocomponent(this.props.path);
      return (
        <div id="base" onclick={this.onclick}>
          <header />
          <contentcomponent />
        </div>
      );
    },

  }); // end baseview

  return baseview;
});

score:2

don't hold a reference to a component like you are. if needed use refs or better yet, just render the component in the callback. react will check if it needs to update the dom.

require(
  [
    "jsx!app/view/base",
    "react",
    "backbone"
  ],
  function (baseview, react, backbone) {
    "use strict";

    var router = backbone.router.extend({
      routes: {
        "": "home",
        "test": "test",
        "login": "login",
        "*error": "404"
      }
    }).on('route', function(action) {
      react.rendercomponent(
        <baseview router={router} path={action} />,
        document.getelementbyid("page")
      );
    });

    backbone.history.start({pushstate: true});
  }
);

edit: since the logic in baseview is very coupeld to the logic in router, it makes most sense to keep them in the same file.

var baseview = react.createclass({
  render: function() {
    return (
      <div id="base" onclick={this.onclick}>
        <header />
        {this.props.children}
      </div>
    );
  },

  onclick: function(event) {
    if (event.target.tagname.tolowercase() !== "a") return;
    if (event.target.classname !== "main") return;

    event.preventdefault();
    this.props.router.navigate(event.target.pathname, {trigger: true});
  }
});

app/router:

var router = backbone.router.extend({
  routes: {
    "": "home",
    "test": "test",
    "login": "login",
    "*error": "404"
  }
}).on('route', function(action) {
  var pathmapping = {
    "home": contenthome,
    "test": contenttest,
    "login": contentlogin
  };
  var content = pathmapping[action] || content404;

  react.rendercomponent(
    <baseview router={router}>
      <content />
    </baseview>,
    document.getelementbyid("page")
  );
});

backbone.history.start({pushstate: true});

Related Query

More Query from same tag