import { Switch, Route, NavLink } from 'react-router-dom';

import { Switch, Route, NavLink, useLocation, useHistory } from 'react-router-dom';

  const location = useLocation();

      <legend className="justify-self-start font-serif"><NavLink to="/">WoW Progression Stats</NavLink></legend>

      {(location.pathname !== '/') ? <legend className="justify-self-start font-serif"><NavLink to="/">WoW Progression Stats</NavLink></legend> : <div></div>}

// stolen from https://forum.freecodecamp.org/t/routing-issue-in-react-react-router-creates-duplicate-history-to-the-same-location/423089/2
function getLocationId({ pathname, search, hash }: any) {
  return pathname + (search ? "?" + search : "") + (hash ? "#" + hash : "");
}

  const history = useHistory();
  useEffect(() => {
    history.block((location, action) => {
      const res = action !== "PUSH" || getLocationId(location) !== getLocationId(history.location);
      // stupid construct to deal with this version of the history library being...poorly typed.
      if (!res) {
        return false;
      }
    });
  }, []);