Anchor tags vs Link components in React: Pick the right option by answering one simple question

Apr 15, 2019

I came across a question on the ReactJS reddit forum today, where someone new to React asked a question similar to one I remember having when I was starting out:

Should I convert all my anchor tags to Link components?

When writing React code and needing to link to a new URL, there are a couple options that probably come to mind:

	// a normal-looking, HTML-style a tag:
	<a href="">Click Here!</a>

	// some kind of Link component, provided by React/Reach Router, Gatsby, etc
	<Link to="/example">Click Here!</Link>

So how do you know which one to use? Answer this one question:

Am I linking to somewhere outside my app, or to somewhere internal?

  1. If linking to an external page that is not a part of your React application, use an
    tag link.
  2. If linking to a different URL within your app, use the
    component. This will (depending on the routing library you’re using) still ultimately render a semantically valid
    tag, but doesn’t refresh the page and gives you additional prop options that can be super handy (check your routing library’s docs for details).

That’s it! Happy linking!

Corrections? Comments?

What was helpful? What did I get wrong? Let me know on Twitter! @markadamfoster

Want more like this? Sign up to get one article delivered weekly by email.
© 2023 Mark Foster