Create inverse react-router <Route /> path; hide on match

I would like a way to invert a Route by path, instead of include like the standard behavior.

Instead of doing:

<DefaultRoute path={['/home', '/contact']} component={NavbarButtons} /> <-- Keep adding for each new page
<DefaultRoute path={'/home'} component={Home} />
<DefaultRoute path={'/contact'} component={Contact} />
<DefaultRoute path={'/no-nav-page'} component={NoNavPage} />

I'd like to achieve this:

<DefaultRoute path={"*"} hidePath={['/no-nav-page']} component={NavbarButtons} />
<DefaultRoute path={'/home'} component={Home} />
<DefaultRoute path={'/contact'} component={Contact} />
<DefaultRoute path={'/no-nav-page'} component={NoNavPage} />

This becomes especially useful when you keep adding new pages, but want to include them in the default set of pages when the NavbarButtons show up, and not manually have to add a path definition for each new page.

I could use useLocation to match the path manually and conditionally render a component:

const { pathname } = useLocation()

return (
  <>
   {routeVars.hideTopbar.includes(pathname) ? null : <TopBar />}
  </>
)

But that becomes overcomplicated when using paths like "/page/:id".

The initial way of specifying an inclusive set of routes you want the NavbarButtons component to render with is the standard conventional way of conditionally rendering routed content, but if you wanted to do the inverse you would need a route that unconditionally matched anything and then explicitly checked a set of routes to exclusively render content on.

The following example uses the useRouteMatch hook to match a set of "hidepath" paths. If there is a match then the custom InverseRoute component returns null to "hide" the routed content, otherwise it returns a regular Route with the regular route props passed through. This pattern is just a specialized route protection implementation.

Example:

import { Route, useRouteMatch } from "react-router-dom";

const InverseRoute = ({ hidePath, ...props }) => {
  const hide = useRouteMatch(hidePath);

  return hide ? null : <Route {...props} />;
};

<InverseRoute
  path="*"                    // <-- match anything
  hidePath={["/no-nav-page"]} // <-- hide on these matches
  component={NavbarButtons}
/>
<Switch>
  <Route path="/home" component={Home} />
  <Route path="/contact" component={Contact} />
  <Route path="/no-nav-page" component={NoNavPage} />
</Switch>