Link is appending instead of opening new link

Question

I have an issue where I'm trying to open a link, but instead of opening the link, it's incorrectly appending the link. I've tried so many things, but no luck.

Error:

Cannot GET /users/123453/www.apple.com

Button.tsx (Tried #1):

    <Button
      block
      onClick={() => window.location.replace("www.apple.com")}
    >
      Title
    </Button>

Button.tsx (Tried #2):

    <Button
      block
      onClick={() => window.location.href = "www.apple.com"}
    >
      Title
    </Button>

Answer 1

You should use absolute URLs when giving stand-alone links.

An absolute URL is a ‘full’ URL or one that contains the entire address of the page.

In your case, add https, that is, replace www.apple.com with https://www.apple.com

 <Button
      block
      onClick={(e) => {
        e.preventDefault();
        window.location.href='https://www.apple.com';
      }}
    >
      Title
    </Button>

Answer 2

Also try, window.location = "https://www.apple.com", will work.