Исключить пути из React Router

Question

Я использую перехватчик useLocation в React Router, чтобы отметить активную вкладку, например:

import React from "react";
import { Link, useLocation } from "react-router-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Routes from "../../../routes";

const Links = () => {

  let location = useLocation();

  return (
      <Tabs value={location.pathname}>
        {Routes.map((route, key) => {
          return (
            <Tab
              component={Link}
              to={route.path}
              label={route.label}
              key={key}
              value={route.path}
            />
          );
        })}
      </Tabs>
  );
}

И образец Routes:

import { Foo } from "../pages";

    const Routes = [
      {
        path: "/foo",
        label: "Foo",
        component: Foo
      }
    ]

Выше работало просто отлично, пока я не решил добавить боковую панель со вторичной навигацией. Чтобы различать основную и вторичную навигацию, я изменил Routes:

import { Foo, Bar } from "../pages";

const Routes = [
  {
    path: "/foo",
    label: "Foo",
    tabs: true,
    component: Foo
  },
  {
    path: "/foo/bar",
    label: "Bar",
    side: true,
    component: Bar
  },
]

Изначально на вкладках также отображалась дополнительная навигация, но это было легко преодолеть с помощью filter и map:

...snip
<Tabs value={location.pathname}>
        {Routes.filter(r => r.tab === true).map((item, key) => {
          return (
...snip

Но ссылки на боковую панель по-прежнему передаются компоненту <Tabs> через value={location.pathname}. Как я могу отфильтровать / удалить любые пути с более чем одним / из location.pathname перед назначением оставшихся свойств <Tabs> value?

Чтобы быть понятным, я только хочу передать вещи как:

/foo
/bar
/baz

, а не:

/foo/bar
/bar/foo/foo

РЕДАКТИРОВАТЬ : неуклюжее решение, которое я сейчас использую:

((location.pathname).match(/\//g)).length === 1 && location.pathname