如何在不附加到当前链接的情况下路由到外部链接？

Question

当我按下在我的端口上运行的图像时， current.link链接将附加到我的当前链接，例如localhost:3000/current.link - 假设 current.link 有一个值。 如何在没有该问题的情况下路由到外部链接？

你下面是我的代码：

const ContCard = ({content,col}) => {
  return (
                

                <div  className={`col-sm-12 col-md-6 col-lg-${col} my-3`}>
                    <div className='card p-3 rounded'  >
                            <a
                                to={content.link}
                                target="_blank" 
                                rel="noreferrer"                    
                            >
                                <img 
                                    className='card-image-top mx-auto'
                                    src= {content.images[0].url} 
                                    width="250" height="200"
                                    
                                />
                          </a>                  
                        <div className='card-body d-flex flex-column'>
                            <h5 className='card-title'>
                                <div> {content.title}</div>
                            </h5>
                            
                        </div>
                    </div>
                </div>
  )
}

export default ContCard;

Answer 1

它完全基于content.link的价值。 你给的例子：

localhost:3000/current.link

意味着该值实际上是"current.link" 。 这不是指向任何外部位置的 URL，因此浏览器没有理由这样解释它。

退一步思考一下浏览器如何解释 URL，在这个列表中 URL肯定会变成“外部”？：

• index.html
• index.domain
• runScript.com
• www.html
• www.com
• google.html
• google.com

答案无处可去。 从浏览器的角度来看，这些都没有结构上的差异。 它们都在引用相对于当前资源的资源。

如果您希望浏览器将 URL 视为完全合格的 URL，则需要完整。 例如，这是相对于当前资源的：

• google.com

但这是一个全新的资源：

• //google.com

也就是说，虽然您不一定需要http:或https:协议/方案的一部分，但您确实需要//部分来指定这是完全限定资源的根。