default-export-example.tsx

// App.tsx
export const App = () => (
  <BrowserRouter>
    <Route path="/users" component={UsersConnector} />  
  </BrowserRouter>
);

// UsersConnector.tsx
export const UsersConnector: React.SFC<RouteComponentProps> = (props) => (
  <Query query={UsersList}>
    {({ data, loading }) => {
      if (loading) return null;
      return <UsersList users={data.users} />
    }}
  </Query>
);
  
// UsersPage.tsx
export const UsersPage: React.SFC<{ users: UsersList }> = (props) => (
  <ul>
    {props.users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

/**
 *
 *  In the above example, the Route paths to the UsersConnector, but I really would prefer it to
 *  be called UsersPage. My App component should treat src/users/index.tsx as a black box, and
 *  whether it is UsersConnector being default exported or UsersPage, conceptually, to Route, it
 *  is rendering the Users Page. The default export lets me be more flexible here, but it is the
 *  -only- place in my codebase I would be doing this, and I don't want to break the style of always
 *  using named exports.
 */