Match <Route> props API with react-router

src/__tests__/route.browser.js

@@ -34,3 +34,33 @@ test('misses as expected', t => {
   t.ok(!/Hello/.test(root.innerHTML), 'does not render unmatched route');
   t.end();
 });
+test('support props.render', t => {
+  const root = document.createElement('div');
+  const Hello = () => <div>Hello</div>;
+  const el = (
+    <Router>
+      <Route path="/" render={() => <Hello />} />
+    </Router>
+  );
+  t.doesNotThrow(() => {
+    ReactDOM.render(el, root);
+  }, 'does not throw when passing props.render');
+  t.ok(/Hello/.test(root.innerHTML), 'renders matched route');
+  t.end();
+});
+test('support props.children as render prop', t => {
+  const root = document.createElement('div');
+  const Hello = () => <div>Hello</div>;
+  /* eslint-disable react/no-children-prop */
+  const el = (
+    <Router>
+      <Route path="/" children={() => <Hello />} />
+    </Router>
+  );
+  /* eslint-enable react/no-children-prop */
+  t.doesNotThrow(() => {
+    ReactDOM.render(el, root);
+  }, 'does not throw when passing props.children as function to <Route>');
+  t.ok(/Hello/.test(root.innerHTML), 'renders matched route');
+  t.end();
+});

src/__tests__/route.node.js

@@ -29,3 +29,33 @@ test('misses as expected', t => {
   t.ok(!/Hello/.test(render(el)), 'does not render unmatched route');
   t.end();
 });
+test('support props.render', t => {
+  const Hello = () => <div>Hello</div>;
+  const el = (
+    <Router location="/">
+      <Route path="/" render={() => <Hello />} />
+    </Router>
+  );
+  t.doesNotThrow(
+    () => /Hello/.test(render(el)),
+    'does not throw when passing props.render'
+  );
+  t.ok(/Hello/.test(render(el)), 'renders matched route in server');
+  t.end();
+});
+test('support props.children as render prop', t => {
+  const Hello = () => <div>Hello</div>;
+  /* eslint-disable react/no-children-prop */
+  const el = (
+    <Router location="/">
+      <Route path="/" children={() => <Hello />} />
+    </Router>
+  );
+  /* eslint-enable react/no-children-prop */
+  t.doesNotThrow(
+    () => /Hello/.test(render(el)),
+    'does not throw when passing props.children as function to <Route>'
+  );
+  t.ok(/Hello/.test(render(el)), 'renders matched route in server');
+  t.end();
+});

src/modules/Route.js

@@ -8,25 +8,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Route as ReactRouterRoute} from 'react-router-dom';
 
+const isEmptyChildren = children => React.Children.count(children) === 0;
+
 function Route(props, context) {
-  const {trackingId, component, children, ...remainingProps} = props;
-  if (remainingProps.render) {
-    throw new Error('Cannot pass render function to tracking route');
-  }
+  const {trackingId, component, render, children, ...remainingProps} = props;
+
   return (
     <ReactRouterRoute
       {...remainingProps}
-      render={renderProps => {
-        const {match} = renderProps;
-        if (match.isExact) {
+      // eslint-disable-next-line react/no-children-prop
+      children={routeProps => {
+        const {match} = routeProps;
+        if (match && match.isExact) {
           context.onRoute({
             page: match.path,
             title: trackingId || match.path,
           });
         }
-        return component
-          ? React.createElement(component, renderProps)
-          : React.Children.only(children);
+
+        if (component)
+          return match ? React.createElement(component, routeProps) : null;
+
+        if (render) return match ? render(routeProps) : null;
+
+        if (typeof children === 'function') return children(routeProps);
+
+        if (children && !isEmptyChildren(children))
+          return React.Children.only(children);
+
+        return null;
       }}
     />
   );
@@ -36,4 +46,6 @@ Route.contextTypes = {
   onRoute: PropTypes.func.isRequired,
 };
 
+Route.displayName = 'FusionRoute';
+
 export {Route};