Why we use LINK tag instead of <a> in REACTJS

Why We Use the Link Tag of react-router-dom Instead of the a Tag in JSX Files

When building a ReactJS application, navigating between pages is a crucial aspect of the user experience. However, the way we navigate between pages can have a significant impact on the performance and user experience of our application. In this article, we'll explore why we should use the Link component from react-router-dom instead of the plain HTML a tag in our JSX files.

The Problem with the a Tag

When we use a plain HTML a tag to navigate between pages, the browser performs a full page reload. This means that the browser sends a request to the server, which responds with a new HTML page. This process involves a full page reload, which can be slower and less efficient than client-side routing.

Here is an example of using the a tag in a React component:

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <a href="/about">Go to About Page</a>
    </div>
  );
}

export default Home;

In this example, clicking the "Go to About Page" link will cause a full page reload as the browser requests the /about page from the server.

The Advantages of react-router-dom

On the other hand, when we use the Link component from react-router-dom, it doesn't trigger a full page reload. Instead, it uses JavaScript to update the URL in the browser's address bar and render the new page content without requesting a new HTML page from the server.

But remember Link tag is just a wrap up over < a > you can see this in chrome developer tools

Here are some advantages of using react-router-dom:

1. Client-side routing: react-router-dom handles routing entirely on the client-side, which means that the browser updates the URL without requesting a new page from the server.

2. JavaScript-based navigation: react-router-dom uses JavaScript to navigate between pages, which allows for a faster and more efficient navigation experience.

3. No server request: Because react-router-dom handles routing on the client-side, it doesn't send a request to the server when you navigate between pages, which means that the page doesn't reload.

The Disadvantages of Full Page Reloads

Full page reloads can have several disadvantages, including:

1. Loss of State: When the page reloads, the entire application state is lost, which means that any unsaved data, user input, or temporary state is discarded.

2. Poor User Experience: Page reloads can be jarring and disrupt the user's flow, leading to a poor user experience.

3. Slower Performance: Page reloads can be slower than client-side routing, which can negatively impact the application's performance.

Using the Link Tag from react-router-dom

First, ensure you have react-router-dom installed:

npm install react-router-dom

Then, you can use the Link component like this:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Link to="/">Go to Home Page</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

In this example:

• The Router component wraps the entire application to enable routing.
• The Link component is used for navigation instead of the a tag.
• The Switch component ensures that only one route is rendered at a time.
• The Route components define the paths and corresponding components to render.

Conclusion

Using the Link component from react-router-dom instead of the plain HTML a tag in your JSX files is essential for creating a smooth and efficient navigation experience in your ReactJS application. By leveraging client-side routing, you can avoid full page reloads, maintain application state, and provide a better overall user experience.

---

Comments

[Conrad Buck]

Hey in case anyone stumbles across this and doesn't know any better, this advice is wrong.

It's trivial to use anchor links without triggering full page reloads when the client-side router is able to handle the state transition. In your document link handler you just need to e.preventDefault() if the URL is an internal one and forward the target path to your router