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
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.
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.