Question

我现在正在使用此代码从生成的URL中打开外部链接：

如果没有http或https，则将react中的外部链接附加到本地主机

  <a href={url} target={'_blank'} rel="noopener noreferrer external">
        {url}
  </a>

如果URL中存在http或https，则工作正常，但如果没有，则将其重定向到http://localhost:3000/${url}。

在React（Create React App）中有没有办法忽略此设置

Answer 1

这根本与反应无关，这取决于浏览器如何理解url。网址有4种：

http://yourdomain.com/images/example.png ：（这对您来说很好，因为它是一个绝对URL，浏览器会按原样打开它）

//yourdomain.com/images/example.png（这与前一个类似，并且对您来说很好，除了这里的模式相对于当前主机而言，如果您的网站是https，则它将打开https，否则将打开http）

您对以下两个网址有疑问，这是因为它们相对于当前主机有效，在您的情况下，您的网站似乎位于http://localhost:3000

/images/example.png（相对于文档根目录）

images/example.png（相对于路径）

现在，如果您想将相对URL转换为相对于另一台主机的相对URL，请像这样使用URL constructor

const baseOfAnotherHost = 'https://someotherdomain.com'
// can also work with relative urls like 'doc/sign/' or '/doc/sign'
const relativeOrAbsoluteURL = 'https://www.someotherdomain.com/doc'
const absoulteUrl = new URL(relativeOrAbsoluteURL,baseOfAnotherHost).href
<a href={absoulteUrl} target={'_blank'} rel="noopener noreferrer external">
    {absoulteUrl}</a>

Answer 2

添加此条件，如果url为空，则不会重定向

{url && <a href={url} target={'_blank'} rel="noopener noreferrer external">
    {url}</a>}

如果没有http或https，则react中的外部链接会附加localhost

2 个答案: