In React applications, efficient navigation is important for a seamless user experience. React Router, a popular library for handling routing in React applications, offers two primary components for navigation: NavLink and Link. Understanding the differences between these two components can help developers choose the right tool for the job. Let’s learn about the key differences between NavLink and Link.

Link

It is used for navigation between different routes in a React application without reloading the page. It provides a way to change the URL and navigate to a different component and It is useful for simple navigation where no specific styling is required for active links.

Syntax

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

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

Example: The Link component is used to navigate to different routes without refreshing the page.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Output

Link tag in React Router

NavLink

The NavLink is a special version of Link that adds styling attributes to the rendered element when It matches the current URL. And also provides a way to add styles to the link when It is the current URL. It offers additional props like activeClassName and activeStyle for customizing the active link appearance. It is used for navigation menus where you want to highlight the currently active route.

Syntax

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

<NavLink to="/about" activeClassName="active">About</NavLink>

// Alternatively, using activeStyle
<NavLink to="/about" activeStyle={{ fontWeight: 'bold' }}>About</NavLink>

Example: The NavLink provides an activeClassName prop to apply a specific class to the link when It is active.

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/" exact activeStyle={{ fontWeight: 'bold' }}>Home</NavLink>
      <NavLink to="/about" activeStyle={{ fontWeight: 'bold' }}>About</NavLink>
      <NavLink to="/contact" activeStyle={{ fontWeight: 'bold' }}>Contact</NavLink>
    </nav>
  );
}

Output

NavLink in React Router

Steps to Create Application

Here, We will create a sample React application for reference. Below we provide step by step process to understand the concept.

Step 1: Create a new React application

Here we created a sample react application by using npm commands

npx create-react-app application-name
cd application-name

Step 2: Install React Router

Once React project successfully created, Then install React Router in out project by using below commands.

npm install react-router-dom

Step 3: Updated Dependencies in package.json File

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1"
  }

Step 4: Update the Business logic

Now we create a component folder in src folder after that we created required components. Those components are useful in NavLink and Link.

Folder Structure

/* App.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: #333;
  padding: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #555;
}

nav a.active {
  background-color: #007bff;
  font-weight: bold;
}

//navbar.js

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navbar() {
    return (
        <nav>
            <NavLink to="/exact"
                activeClassName="active">Home</NavLink>
            <NavLink to="/about"
                activeClassName="active">About</NavLink>
            <NavLink to="/contact"
                activeClassName="active">Contact</NavLink>
        </nav>
    );
}

export default Navbar;

//App.js 

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Navbar from './components/Navbar';
import './App.css';

function App() {
    return (
        <Router>
            <div>
                <Navbar />
                <Routes>
                    <Route path="/"
                        element={<Home />} />
                    <Route path="/about"
                        element={<About />} />
                    <Route path="/contact"
                        element={<Contact />} />
                </Routes>
            </div>
        </Router>
    );
}

export default App;

//home.js
import React from 'react';

function Home() {
  return <h2>Home</h2>;
}

export default Home;

//Contact.js
import React from 'react';

function Contact() {
  return <h2>Contact</h2>;
}

export default Contact;

//About.js
import React from 'react';

function About() {
  return <h2>About</h2>;
}

export default About;

Step 5: Run the Project

Now run this project by using below command

npm start

Output

Difference between NavLink and Link tag in React Router

Difference between NavLink and Link