MenuLink.tsx

/**
 * Inspired by https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/examples/CustomLink.js
 */
function MenuLink({
  to,
  isActiveOnlyWhenExact,
  children,
}: {
  to: string,
  isActiveOnlyWhenExact?: boolean,
  children: React.ReactNode,
}) {
  const match = ReactRouter.useRouteMatch({
    path: to,
    exact: isActiveOnlyWhenExact,
  });

  return (
    <Link
      as={ReactRouterLink}
      to={to}
      color={match && 'blue.800'}
      backgroundColor={match && 'blue.100'}
      padding={2}
      marginLeft={-2}
      width="full"
      display="flex"
      fontWeight="medium"
    >
      {children}
    </Link>
  );
}

// Example usage:

 <MenuLink to={`/projects/${project.id}/manage`} isActiveOnlyWhenExact={true}>General</MenuLink>