How to route a button to an external site in React?-CodePudding

Here is what I have:

export default function Button({
  btnLink = '',
  btnText = 'generic text',
  border = false,
}) {
  return (
    <BtnStyle border={border} className="button-wrapper">
      <Link className="button" to={btnLink}>
        {btnText}
      </Link>
    </BtnStyle>
  );
}

And the button itself:

<Button btnText="Download CV" btnLink="http://google.com" />

When I add a site i.e. 'google.com' to BtnLink, it prefixes it w/ my homepage. Any advice?

CodePudding user response：

Using the Link will append the address link to your homepage.

See more of Link from React Router: https://v5.reactrouter.com/web/api/Link

You can do this to open the address in different tab.

 <button
  className="button"
  onClick={() => {
    window.open(btnLink);
  }}
>
  {btnText}
</button>

or if you want to open the address in the same tab.

<button
  className="button"
  onClick={() => {
    window.location.href = btnLink
  }}
>
  {btnText}
</button>

CodePudding user response：

Using the Link component from react-router-dom will not work with external links that go away from your site URL. Something such as https://www.google.com will not work with that component. Instead, you will need to have an <a /> tag here and utilize the href attribute. You can simply style the <a /> tag link a button to get the behavior you are looking for once it is clicked. Here is a code example using a custom styled-component:

import React from 'react';
import styled from 'styled-components';

const LinkButtonComponent = styled.a`
    text-decoration: none !important;
    color: white;
    background-color: green;
    padding: 2px;
    border-radius: 3px;
    height: 50px;
    width: 100px;
    cursor: pointer;
`;

type LinkButtonProps = {
    children: React.ReactNode;
};

export default function LinkButton({ children }: LinkButtonProps) {
    return (
        <LinkButtonComponent href='https://www.google.com'>
            {children}
        </LinkButtonComponent>
    );
}