在React Router Dom v6中添加外部链接

Question

在V6中找不到一种方法可以在没有路由器准备站点URL的情况下动态添加外部链接。只需要做这样的事情：

<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>

Answer 1

关于：

<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>

参考他们的文件

带有..的<Link to>。。当当前URL以/结尾。忽略尾部斜杠，并且为每个删除一个URL段。。。但是一个值处理。。不同的是，当前URL以/v结尾时没有。

Answer 2

您的链接必须预先准备好协议，即https://。否则，它将附加到网站URL。在您的情况下：

<a href={'https://' + dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>

Answer 3

您的链接必须包含协议，以避免RR预处理网站url。

Answer 4

我遇到了和您一样的问题，当使用普通锚标记执行外部组件时，它重定向到路由器，而不是打开空白页。

我的问题的解决方案是简单地删除锚点标签中的关键参数，如下所示

<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>

至

<a href='{item.url}' target='_blank'> {item.title} <a/>