Understanding the difference between <a> and <Link> in React Router

Introduction

When building apps with React, I often wonder whether to use <a> or <Link> for page transitions.

In this article, I'll briefly summarize the differences between them.

What happens when you use <a>?

The standard HTML <a> tag commands the browser to "open a new page."

<a href="/map">Go to Map</a>

In this case:

The entire page is reloaded.

The React app's state is reset.

It's like the app is restarting.

In other words, the "speed" and "fluidity" of a SPA (Single Page Application) are lost.

What happens when you use <Link>?

The component provided by React Router
"handles page transitions on the JavaScript side."

import { Link } from "react-router-dom";

<Link to="/map">Go to Map</Link>

In this case:

The component switches without reloading the page.

React state is preserved.

Transitions are fast and smooth.

References

• React Router Docs - Link
• Why we use Link tag instead of anchor in React (dev.to)
• Hashnode: Link vs. Anchor tag in React Router