使用React Link时如何防止外部URL追加到localhost URL？

编程问答 2022-06-11

问题描述

我的本​​地主机我要附加到我要访问的外部URL。如何预防呢？

<Link to={article.url}>
     <img src={article.urlToImage} alt="thumb"/>
</Link>

http：// localhost：3000 / https：//bleacherreport.com/articles/2910730-fifa-21-breaking-down-standard-ultimate-covers-and-newest-features

解决方法

选择简单的锚标记。

如果该页面位于您的一条路由上，则该路由器的Link标记很好。否则，只需使用陈旧的anchor tags 

const url = 'https://bleacherreport.com/articles/2910730-fifa-21-breaking-down-standard-ultimate-covers-and-newest-features'

<a href={url} />
,

如果您正在使用重定向到项目中一部分的另一个URL，则使用

<Link to=""> ....<Link>

示例：

const my_url = '/contact-us'

<Link to={my_url}>Click here </Link>

但是，如果您要重定向到外部链接，例如google.com，amazon.com等，请使用旧的<a href="link">....</a>

示例：<a href="https://www.google.com/"> click here</a>

您的解决方案是：

const article = {
  url : "https://www.google.com/"
}

<a href={article.url}>
     <img src={article.urlToImage} alt="thumb"/>
</a>
javascriptreactjsreactjs