React Redirection Doesn't Work on Github Pages

Question

In my main.js file, I have written the following code:

const Contact = styled(NavLink)`
color: ${props => props.theme.text};
position: absolute;
top: 2rem; 
right: calc(1rem + 2vw);
text-decoration: none;
z-index: 1;
`

<Contact target="_blank" to={{pathname: "mailto:email@gmail.com"}}>
            <motion.h2
            whileHover={{scale:1.1}}
            whileTap={{scale:0.9}}
            >

and it works alright on localhost. However, after I deployed the website on Github Pages, by clicking on the button, I get redirected to https://username.github.io/webpage/#/mailto:email@gmail.com Instead of email@gmail.com

Answer 1

NavLink from react-router meant to route in a SPA. Just use the 'a' tag for this

<a href="mailto:email@gmail.com">Email</a>

or you should try

<Contact target="_blank" to='#' 
      onClick={() => window.location = 'mailto:email@gmail.com'}
>
...