react-router-dom link to another page

Question

Problem: when clicking the link, the address is parsing the value of the "to" properties of the Link in the react-router-dom, please see the output: http://localhost:3000/https://xxxxxx.github.io/

import React from 'react';
import { Link } from 'react-router-dom';

const Footer = () => {
  return (
    <footer className='footer-light bg-light'>
      <div
        className='text-center p-3'
      >
        <Link
          className='text-decoration-none text-dark'
          to='https://xxxxxxx.github.io/'
        >
          © {new Date().getFullYear()} Copyright
        </Link>
      </div>
    </footer>
  );
};

export default Footer;

I want to redirect to another page when clicking the link

Answer 1

You can either pass a string, object, function to the to prop to redirect to a specific URL.

Here's how to do with each of them

String :

<Link to="https://google.com">Click me</Link>

Object :

<Link to={{ pathname: "https://google.com" }} target="_blank">Click me</Link>

Function :

<Link to={location => ({ ...location, pathname: "https://google.com" })} />

Works for both external URLs as well as localhost.

Docs: https://reactrouter.com/web/api/Link

Answer 2

you can try this :

<Link to={{ pathname: "https://xxxxxxx.github.io/" }} target="_parent" rel="noopener noreferer">
© {new Date().getFullYear()} Copyright
</Link>

this will open https://xxxxxxx.github.io/ in the same tab.

or,

 <Link to={{ pathname: "https://xxxxxxx.github.io/" }} target="_blank" rel="noopener noreferer">
© {new Date().getFullYear()} Copyright
</Link>

this will https://xxxxxxx.github.io/ in a new tab.