React Redirection Doesn't Work on Github Pages-CodePudding

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 protected]"}}>
            <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 protected] Instead of [email protected]

CodePudding user response：

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

<a href="mailto:[email protected]">Email</a>

or you should try

<Contact target="_blank" to='#' 
      onClick={() => window.location = 'mailto:[email protected]'}
>
...