Link to an outside URL in my React application

Question

I'm still pretty new to React and web development in general. I'm building my personal portfolio website and wanted to do in in React so I could get more practice. I want to add a link to both my GitHub and my LinkedIn and all the research I've done has told me to use an <a> tag, but instead of going to my LinkedIn or GitHub it just tacks on the link to the rest of the url of my portfolio site.

import React from 'react'

export default () => {
  return (
    <div className='foot'>
      <p>website created by Thomas Gutierrez</p>

      <p><a href="www.linkedin.com/in/tg308">linkdin</a> : 
         <a href="www.github.com/tomg308">github</a></p>
    </div>
  )
}

Can someone please explain what I'm doing wrong?

score 3 · Accepted Answer · answered Jul 25 '18 at 15:49

3

You need to add the HTTP(s) protocol to your URLs.

href="https://www.linkedin.com/in/tg308"

This tells the browser to redirect to a whole other page because it is an absolute URL because it specifies the scheme (HTTPS in this case).

answered Jul 25 '18 at 15:49

Andrew Li

55,805
14
125
143

You can also leave out the protocol and do `href="//www.linkedin.com/in/tg308"` if you aren't unsure if it's HTTP or HTTPS – dance2die Jul 25 '18 at 16:49
@SungKim See https://stackoverflow.com/questions/28446314/why-use-protocol-relative-urls-at-all – Andrew Li Jul 25 '18 at 16:53

Link to an outside URL in my React application

1 Answers1