ShowOnRoute.jsx

import React from 'react';


export default class ShowOnRoute extends React.Component {
    static contextTypes = {
        router: React.PropTypes.func.isRequired
    };

    static propTypes = {
        name: React.PropTypes.string.isRequired,
        wrapper: React.PropTypes.oneOfType([React.PropTypes.element, React.PropTypes.string]),
        params: React.PropTypes.object,
        query: React.PropTypes.object
    };

    static defaultProps = {
        wrapper: 'div',
        params: undefined,
        query: undefined
    };

    render() {
        if (this.context.router.isActive(this.props.name, this.props.params, this.props.query)) {
            if (React.Children.count(this.props.children) > 1) {
                //Just to prevent dumb-dumbs, we wrap if there are more than one child. Ideally you should just pass in
                //a singular child and declare it manually.
                return (
                    <this.props.wrapper {...this.props}>
                        {this.props.children}
                    </this.props.wrapper>
                );
            } else {
                return this.props.children;
            }
        } else {
            return null;
        }
    }
}