How can i route to an external link without appending to current link?

ThatGuyNick 0
Viewed 13

when I press the image I have running on my port, the current.link link is appended to my current link as such localhost:3000/current.link - assuming that current.link has a value. how can I route to an external link with out that issue?

below you is my code :

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;
hyperlink routes tags reactjs
1 Answers

It's entirely based on what value content.link has. The example you give:

localhost:3000/current.link

Implies that the value is literally "current.link". That's not a URL to any external location, so the browser has no reason to interpret it like that.

Taking a step back and thinking about how a browser interprets URLs, where in this list does a URL definitely become "external"?:

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

The answer is nowhere. From the browser's perspective, there is no structural difference to any of those. They're all referencing a resource relative to the current resource.

If you want the browser to treat the URL as a fully-qualified URL, it needs to be complete. For example, this is relative to the current resource:

  • google.com

But this is an entirely new resource:

  • //google.com

That is, while you don't necessarily need the http: or https: part of the protocol/scheme, you do need the // part to specify that this is the root of a fully-qualified resource.

user3pn10
Related