react-router-dom 链接到另一个页面

Question

问题：点击链接时，地址在解析react-router-dom中Link的“to”属性的值，请看输出： 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;

单击链接时我想重定向到另一个页面

Answer 1

您可以将字符串、对象、函数传递给to道具以重定向到特定的 URL。

这是如何处理它们中的每一个

字符串：

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

对象：

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

功能：

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

适用于外部 URL 和 localhost。

文档： https : //reactrouter.com/web/api/Link

Answer 2

你可以试试这个：

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

这将在同一选项卡中打开https://xxxxxxx.github.io/ 。

或者，

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

这将在新选项卡中显示https://xxxxxxx.github.io/ 。