When to use Link and anchor tag in React

It's possible that you just started learning React or probably you have been learning React for some time and you still don't know the difference between the Link tag and the Anchor tag and when to use them in your React application. the objective of this article is to help you understand just that.

Anchor tags

If you are just learning React, you must be familiar with what the anchor tag does from HTML. the anchor tag is used for the same function in React too, which is to serve as a link between two pages in the same application or a different application.

<a href="https://www.aviatorcodes2.com">My Website</a>

The value of the href attribute is usually a URL that links to an external page, a path to a section or page in the same application, email or phone number. The anchor tag also accepts other attributes like download, target, media,rel etc. [source]

Link

Link, is used to allow your users to be able to successfully navigate around your application. Link accept props to whose value is either a string or an object which are called locator descriptor,

• string: if it's a string, it represent an absolute path to link to, e.g. /users/123, Link doesn't support a relative path but anchor tag does, relative path is a location that is relative to a current directory, relative path makes use of single or double dot (.), (..) which helps you locate the current directory and the parent directory e.g. ../users/user123
• Object: an object, can have the following keys:

1. pathname: a string representing the path to link to.
2. query: an object with a key:value pair to be stringified
3. hash: A hash to put in the URL
4. state: State to persist the location. [source]

// string
<Link to="/users">Users</Link>

// Object
<Link to={`/users/${user.id}`}>{user.name}</Link>

More reasons..

Since anchor tag and Link fundamentally help us link different pages in our application together, so the question now is, why is Link special aside from the fact that it accepts string and object, Are there any more differences between the two? yes, there is.

The anchor tag href attribute would trigger a page refresh every time it is clicked, you will even notice the reload icon on your browser load every time you click an anchor tag link

These reloads will continually reset the application states which we don't want, because it will affect the performance of your application. Whenever you need to navigate through your application use Link of react-router as it does not trigger a page refresh, using Link also makes your React application pages load faster. Since React is used to create single page applications, make sure you choose Link or Navlink when creating routes within your application

You have seen when to use Link so when should you use anchor tags? use <a/> tags when you need to link your application to an external URL.

Quick Demo on how to use Link

• After creating your react application with npx create-react-app my-app, install react-router-dom using this command

  npm install react-router-dom
  // or
  yarn install react-router-dom
  

• Create the various pages of your application and inside your App.js import those various pages and wrap them inside react router. eg.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/not-found" element={<NotFound />} />
        </Routes>
      </Router>
    </>
  );
}
export default App;

• After the above step, you can now use these routes anywhere in your application, all you have to do is, inside the page or component where you need either of the routes, import Link and pass the route path "/", "/about" or "/not-found" to the to props of the Link tag. e.g. Inside the not-found page, I can create a Button, Text or Icon which I will wrap with the Link tag that will route my users back to the home page any time they click on it

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

function NotFound() {
  return (
    <div>
          <h1>Oops! Something is wrong</h1>
          <p>404 - Page not found!</p>
          <Link to="/">
            Back To Home
          </Link>
    </div>
  );
}
export default NotFound;

Thank you for reading, see you in my next article. Remember to stay hydrated✌