tabs

import { Route, Link, Redirect, Switch } from 'react-router-dom';
import { useRouteMatchTab } from '@olist/ui-commons/hooks';

const tabKeys = {
  home: `home`,
  orders: `orders`,
};

const basename = '/products';
const routes = {
  basename,
  home: `${basename}/home`,
  orders: `${basename}/orders`,
};

const matchTab = useRouteMatchTab(routes.home, [
  {
    path: routes.home,
    tabKey: tabKeys.home,
  },
  {
    path: routes.orders,
    tabKey: tabKeys.orders,
  },
]);

return (
  <TabsProvider currentTab={matchTab.tabKey}>
    <TabsMenu aria-label="Main tabs">
      <Tab as={Link} to={routes.home} tabKey={tabKeys.home}>
        home
      </Tab>
      <Tab as={Link} to={routes.orders} tabKey={tabKeys.orders}>
        orders
      </Tab>
    </TabsMenu>
    <Switch>
      <Route path={routes.home}>
        <TabsPanel tabKey={tabKeys.home}>home</TabsPanel>
      </Route>
      <Route path={routes.orders}>
        <TabsPanel tabKey={tabKeys.orders}>orde</TabsPanel>
      </Route>
      <Route path={routes.basename}>
        <Redirect to={routes.home} />
      </Route>
    </Switch>
  </TabsProvider>
);