Why we use LINK tag instead of <a> in REACTJS
Tags: javascript, react, basic, beginners
Published: 2024-07-05 16:03:33



## 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:

```jsx
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:

```bash
npm install react-router-dom
```

Then, you can use the `Link` component like this:

```jsx
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.

---