Allow passing props through to renderRouteHandler when used manually (example attached)

Author: STRML

examples/extras/AnimatedLocations.jsx

@@ -0,0 +1,30 @@
+'use strict';
+var React = require('react');
+var Router = require('react-router-component');
+var TransitionGroup = require('react/lib/ReactCSSTransitionGroup');
+
+/**
+ * AnimatedLocations is an extension of the <Locations> object that animates route transitions.
+ */
+var AnimatedLocations = React.createClass({
+ mixins: [
+ Router.AsyncRouteRenderingMixin,
+ Router.RouterMixin,
+ React.addons.PureRenderMixin
+ ],
+
+ getDefaultProps: function() {
+ return {
+ component: 'div'
+ }
+ },
+
+ render: function() {
+ // A key MUST be set in order for transitionGroup to work.
+ var handler = this.renderRouteHandler({key: this.state.match.path});
+ // TransitionGroup takes in a `component` property, and so does AnimatedLocations, so we pass through
+ return <TransitionGroup {...this.props}>{handler}</TransitionGroup>;
+ }
+});
+
+module.exports = AnimatedLocations;

examples/extras/README.md

@@ -0,0 +1,5 @@
+### Extras
+
+These components are not part of RRC and should not be imported into your modules.
+
+Instead, use them as inspiration for what you want to build.

examples/extras/TitleSwitcher.jsx

@@ -0,0 +1,61 @@
+'use strict';
+var React = require('react');
+var Router = require('react-router-component');
+
+/**
+ * TitleSwitcher is an extension of Router that switches the title on render.
+ * The actual function that switches the title is not implemented here, as that 
+ * can be environment-specific in isomorphic apps.
+ */
+var TitleSwitcher = React.createClass({
+ mixins: [
+ Router.AsyncRouteRenderingMixin,
+ Router.RouterMixin,
+ React.addons.PureRenderMixin
+ ],
+
+ propTypes: {
+ messages: React.PropTypes.object,
+ component: React.PropTypes.node
+ },
+
+ getDefaultProps: function() {
+ return {
+ component: 'div',
+ messages: {}
+ }
+ },
+
+ getRoutes: function(props) {
+ return props.children;
+ },
+
+ setTitle: function() {
+ var match = this.getMatch(), pageTitle;
+ var path = match.route.path;
+ if (path) {
+ if (typeof path !== "string") {
+ path = match.matchedPath;
+ }
+ // Assuming a messages object here. Can be used to change simple paths like '/account' into
+ // "My Account", and for internationalization.
+ var msg = this.props.messages.titles[path];
+ pageTitle = typeof msg === "function" ? msg(match.match) : msg;
+ } else {
+ // Route not matched
+ pageTitle = '404';
+ }
+ // Somewhere here you may want to set the page title
+ // something.setPageTitle(pageTitle)
+ return pageTitle;
+ },
+
+ render: function() {
+ var title = this.setTitle();
+ var handler = this.renderRouteHandler();
+ var Component = this.props.component || "div";
+ return <Component {...this.props} data-page-title={title}>{handler}</Component>;
+ }
+});
+
+module.exports = TitleSwitcher;

lib/RouteRenderingMixin.js

@@ -2,6 +2,8 @@
 
 var React = require('react');
 var cloneWithProps = require('react/lib/cloneWithProps');
+var assign = Object.assign || require('object.assign');
+
 
 /**
  * Mixin for routers which implements the simplest rendering strategy.
@@ -10,8 +12,8 @@ var RouteRenderingMixin = {
 
  renderRouteHandler: function() {
  var handler = this.state.handler;
+ var props = assign({ref: this.state.match.route.ref}, props);
  // If we were passed an element, we need to clone it before passing it along.
- var props = {ref: this.state.match.route.ref};
  if (React.isValidElement(handler)) {
  return cloneWithProps(handler, props);
  }