Link and NavLink components in React-Router-Dom

When creating a React app, handling navigation properly is important. React Router provides two key components, Link and NavLink, to make moving between pages easy. These components work like regular <a> tags but prevent full-page reloads, making the app faster and smoother for users.

What is a Link Component?

In the React application, the Link component is used to navigate between pages without a full-page reload. It replaces the traditional <a> tag to improve performance. It is a simple navigator.

Syntax

<Link to="/path">Text</Link>

Features of Link

• Prevents Full Page Reload: Unlike traditional <a> tags, Link enables seamless navigation without refreshing the page.
• Uses the to Prop: Defines the destination URL.
• Supports Dynamic Routes: Can accept dynamic values for navigation.

Now let's understand the link component with an example

import React from "react";
import { Link, Route, Routes } from "react-router-dom";

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

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

function App() {
    return (
        <div>
            <nav>
                {/* Link works but does NOT add an active class */}
                <Link to="/">Home</Link> | <Link to="/about">About</Link>
            </nav>

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

export default App;

Output

In this example

• Uses the Link component from react-router-dom to navigate between Home and About pages without reloading the page.
• The Routes component contains Route elements that define the paths ("/" for Home and "/about" for About).
• Unlike NavLink, Link does not apply any special styling to indicate which page is active.
• Clicking "Home" or "About" updates the URL and displays the respective page, but the link itself does not highlight the active state.

What is NavLink Component?

The NavLink component extends Link by adding an "active" class styling. It is useful for highlighting active menu items in a navigation bar. It is used for highlighting the active path.

Syntax

<NavLink to="/path" activeClassName="active">Text</NavLink>

Features of NavLink

• Adds Active Class: Automatically applies an active class when the link matches the current route.
• Supports Custom Styling: Allows custom styles for active and inactive states.
• Exact Matching: By default, matches partially, but exact can be used for precise matching.

Now let's understand the NavLink component with an example

import React from "react";
import { NavLink, Route, Routes } from "react-router-dom";

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

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

function Navbar() {
    return (
        <nav>
            {/* Using inline styles for active link */}
            <NavLink
                to="/"
                style={({ isActive }) => ({
                    color: isActive ? "red" : "black",
                    fontWeight: isActive ? "bold" : "normal",
                    textDecoration: "none",
                    marginRight: "15px",
                })}
            >
                Home
            </NavLink>

            <NavLink
                to="/about"
                style={({ isActive }) => ({
                    color: isActive ? "red" : "black",
                    fontWeight: isActive ? "bold" : "normal",
                    textDecoration: "none",
                })}
            >
                About
            </NavLink>
        </nav>
    );
}

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

export default App;

Output

In this example

• The example uses NavLink instead of Link, which highlights the active page by applying different styles dynamically.
• When a link is active, it turns red and becomes bold, while inactive links remain black and normal.
• The navigation bar is placed in a separate Navbar component, making the code more modular and reusable.
• Clicking "Home" or "About" updates the URL and displays the respective page, while the active link gets highlighted automatically.

Link vs NavLink in React Router Dom

• Both Link and NavLink navigate without reloading the page.
• NavLink adds an "active" class to style the active page, while Link does not.
• Use NavLink for menus and navigation bars, and Link for normal navigation.

Interesting Facts

Handling External Links

Since Link and NavLink are designed for internal routing, they cannot be used for external links. Instead, use a normal <a> tag.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    External Link
</a>

Combining useNavigate with Link

React Router also provides a useNavigate hook for programmatic navigation. If you need to navigate based on user actions (e.g., after form submission), use useNavigate instead of Link.

import { useNavigate } from "react-router-dom";
function Home() {
    const navigate = useNavigate();
    return (
        <button onClick={() => navigate("/dashboard")}>
            Go to Dashboard
        </button>
    );
}