A small example where an error is thrown due to importing a component that has selectors into another component.

index.js

import selectVariables from './selectors';
import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Tabs, Tab } from 'material-ui/Tabs';
import Foo from '../Foo';
import Bar from '../Bar';

class BazTabs extends React.Component {
  constructor(props)
  {
    super(props);
    this.state = {
      value: 'foo',
    };
  }

  handleChange = (value) => {
    this.props.router.push(`/baz/${value}`);
  };

  render() {
    return (
      <Tabs
        // Use the tabs value to map the active route to a tab
        value={this.props.params.bazTab}
        onChange={this.handleChange}
      >
        <Tab label="Foo" value="foo">
            <Foo/>
        </Tab>
        <Tab label="Bar" value="bar">
            <Bar/>
        </Tab>
      </Tabs>
    );
  }
}

// Extend the baz tabs to have access to react router so it is possible to programmatically navigate using this.props.router.push(...
const DecoratedBazTabs = withRouter(BazTabs);

export class Baz extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    // Any child component of a route receives the params props and other props associted with the router
    return ( <DecoratedBazTabs {...this.props}> </DecoratedBazTabs> );
  }
}

const mapStateToProps = selectVariables();

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Baz);