Understanding the Difference Between React Link and HTML anchor tags: Client-Side vs. Page Reload Navigation

The primary difference between the React <Link> component and the traditional HTML <a> tag lies in how they handle navigation and page reloads.

1. Traditional HTML <a> Tag

When using the traditional <a> tag for navigation, clicking the link will cause a full page reload. The browser requests the new page from the server, which may involve reloading all resources (HTML, CSS, JavaScript, etc.).

 

Each time a user clicks on an <a> tag, the browser sends a request to the server, and the server responds with the new page. This is common for traditional web applications.

 

Example 

<a href="/about">About Us</a>

 

2. React <Link> Component (from react-router-dom)

Client-Side Navigation: The React <Link> component is part of react-router-dom, enables navigation within a React application without triggering a full page reload. Instead of sending a request to the server, React's router updates the URL and renders the new component for the route on the client side.

 

No Page Reload: This allows for a seamless and faster user experience as only the necessary components are updated instead of the entire page reloading.

 

Single Page Application (SPA): The <Link> component is used in SPAs (Single Page Applications), where the content is dynamically loaded, and routing is handled on the client-side using JavaScript.

 

Example 

<Link to="/about">About Us</Link>

 

In a React-based Singe Page Applications, it’s best to use <Link> for navigation to maintain the fast, dynamic experience without unnecessary page reloads.

 

Let’s build an application to understand this difference better.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘anchor-vs-link-component’.

 

Project structure looks like below. 

 

Step 2: Install react router dependency.

 

To implement routing, we need to install the react-router-dom package. This will allow us to use React Router for navigation.

 

Go to the project root folder and execute below command.

npm install react-router-dom

 

Step 3: Create pages folder in src folder and define Home, About components.

 

Home.jsx 

export default function Home() {
  return (
    <>
      <h1>Home Page</h1>
    </>
  );
}

About.jsx

export default function About() {
  return (
    <>
      <h1>About Page</h1>
    </>
  );
}

Step 4: Update App.jsx with below content.

 

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About Using Link Component</Link>
          </li>
          <li>
            <a href="/about">About Using Hyper Link</a>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

In the above code, we have two different ways of navigating to the About page.

 

Approach 1: About Using Link Component

<Link to="/about">About Using Link Component</Link>

This uses React's <Link> component from react-router-dom. It enables client-side navigation, meaning no full page reload occurs. The URL changes to /about, and React renders the About component without refreshing the entire page.

 

The About Using Link Component will be faster and avoid the overhead of a full page refresh, keeping your app performant in a Single Page Application (SPA) context.

 

Approach 2: About Using Hyper Link

<a href="/about">About Using Hyper Link</a>

This uses the traditional HTML <a> tag. Clicking on this will cause a full page reload, sending a request to the server for the /about page, which may involve reloading all resources.

 

The About Using Hyper Link will reload the entire page, which is typical for traditional websites, but unnecessary in React applications when using internal routing.

 

Step 5: Update main.jsx with below content.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Step 6: Build and run the application by executing below commands.

cd anchor-vs-link-component
npm install
npm run dev

Open the url ‘http://localhost:5173/’ in browser, you will see below screen. 

 

Open inspect panel (Right click on the browser -> Inspect), go to network tab.

 

Now, click on the link ‘About Using Link Component’, you can observe that the page is rendered at client side (No page reloading and no calls to the server).

 

Now click on the link ‘About Using Hyper Link’, you can observe that the page is reloaded from server, and same can be observed in Network tab. 

 

In a React-based SPA, it’s best to use <Link> for navigation to maintain the fast, dynamic experience without unnecessary page reloads.

 

You can download this application from this link.

Previous                                                    Next                                                    Home