Tabs.jsx

import React from 'react'
import { Route, Link } from 'react-router-dom'

const TabLink = ({ to, exact, title }) => (
  <Route path={to} exact={exact} children={({ match }) => (
    <li className={`nav-item ${match ? 'active' : ''}`}>
      <Link to={to} className='nav-link' role='tab'>{title}</Link>
    </li>
  )} />
)

const TabPanel = ({ to, exact, content }) => (
  <Route path={to} exact={exact} children={({ match }) => (
    <div className={`tab-pane ${match ? 'active' : ''}`} role='tabpanel'>
      {match ? content : null}
    </div>
  )} />
)

export function Tabs ({ children }) {
  return (
    <span>
      <ul className='nav nav-tabs' role='tablist'>
        {React.Children.map(children, tab => (
          <TabLink
            key={`nav-item-${tab.props.to}`}
            to={tab.props.to}
            exact={tab.props.exact}
            title={tab.props.title}
          />
        ))}
      </ul>
      <div className='tab-content'>
        {React.Children.map(children, tab => (
          <TabPanel
            key={`tab-panel-${tab.props.to}`}
            to={tab.props.to}
            exact={tab.props.exact}
            content={tab.props.children}
          />
        ))}
      </div>
    </span>
  )
}

export const Tab = () => {}

usage.jsx

import {Tabs, Tab} from './Tabs'

function PageWithTabs ({ match }) {
  return (
    <Tabs>
      <Tab title='Foo' exact to={`${match.url}`}>
        FOO
      </Tab>
      <Tab title='Bar' to={`${match.url}/bar`}>
        <Foobar />
      </Tab>
      <Tab title='Baz' to={`${match.url}/baz`}>
        BAZ
      </Tab>
    </Tabs>
  )
}