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

【问题标题】：react-router-dom link to another pagereact-router-dom 链接到另一个页面
【发布时间】：2021-12-17 13:23:53
【问题描述】：

问题：点击链接时，地址正在解析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;

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

【问题讨论】：

在你的localhost。
...好吧，如果您想重定向到另一个站点（如果我没看错的话），为什么不直接使用a 标签...？

标签： javascript reactjs react-router react-router-dom

【解决方案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

【讨论】：

【解决方案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/ 在新标签中。

【讨论】：