react-router NavButton

NavButton.tsx

import React, { MouseEvent } from "react";
import { useRouteMatch, useHistory } from "react-router-dom";
import classnames from 'classnames';

type Props = {
  to: string,
  replace?: boolean,
  exact: boolean,
  className: string,
  activeClassName: string,
  children: any,
  [propName: string]: any
}

const NavButton = ({
  to,
  replace,
  exact,
  className,
  activeClassName,
  children,
  ...props
}: Props) => {
  const match = useRouteMatch({
    path: to,
    exact
  });

  const history = useHistory();
  const navigate = () => {
    const method = replace ? history.replace : history.push;
    method(to);
  }

  const handleClick = (e: MouseEvent) => {
    e.preventDefault();
    navigate();
  }

  return (
    <button 
      {...props}
      onClick={handleClick}
      className={classnames(className,{[activeClassName]: match})}
    >{children}</button>
  );
}
export default NavButton;