How to Use NavLink in React for Navigation

Use NavLink from react-router-dom to create navigation links that automatically apply an active style when the link matches the current URL. Wrap your app with BrowserRouter, then use NavLink with the to prop to specify the target route.

Syntax

The NavLink component creates a link that knows if it is active based on the current URL. It accepts a to prop for the target path and optional props like className or style to customize the active link appearance.

• to: The path to navigate to.
• className: CSS class applied to the link.
• style: Inline styles, can be a function to style active links.
• end: Boolean to match exact path only.

jsx

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

<NavLink to="/home" className={({ isActive }) => isActive ? 'active' : ''} end>
  Home
</NavLink>

Example

This example shows a simple navigation bar with three links. The active link is styled with a bold font and blue color automatically when its route matches the current URL.

jsx

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

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

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

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

export default function App() {
  return (
    <BrowserRouter>
      <nav style={{ display: 'flex', gap: '1rem' }}>
        <NavLink
          to="/"
          end
          style={({ isActive }) => ({
            fontWeight: isActive ? 'bold' : 'normal',
            color: isActive ? 'blue' : 'black'
          })}
        >
          Home
        </NavLink>
        <NavLink
          to="/about"
          style={({ isActive }) => ({
            fontWeight: isActive ? 'bold' : 'normal',
            color: isActive ? 'blue' : 'black'
          })}
        >
          About
        </NavLink>
        <NavLink
          to="/contact"
          style={({ isActive }) => ({
            fontWeight: isActive ? 'bold' : 'normal',
            color: isActive ? 'blue' : 'black'
          })}
        >
          Contact
        </NavLink>
      </nav>

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

Output

A navigation bar with three links: Home, About, Contact. The active link is bold and blue. Below the nav, the page content changes to show the selected page's heading.

Common Pitfalls

Common mistakes when using NavLink include:

• Not wrapping your app in BrowserRouter, which breaks routing.
• Forgetting the end prop on the root path /, causing multiple links to appear active.
• Using className or style props incorrectly without the function form to detect active state.

jsx

/* Wrong: No BrowserRouter wrapping */
<NavLink to="/home">Home</NavLink>

/* Wrong: Missing 'end' on root path */
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>

/* Right: Using 'end' to match exact root path */
<NavLink to="/" end>Home</NavLink>
<NavLink to="/about">About</NavLink>

Quick Reference

Tips for using NavLink effectively:

• Always wrap your app with BrowserRouter.
• Use the end prop on links to / to avoid multiple active links.
• Use the function form of className or style to style active links.
• Use semantic HTML and accessible labels for better user experience.

Key Takeaways

Wrap your app with BrowserRouter to enable routing.

Use NavLink with the to prop to create navigation links.

Add the end prop to NavLink for exact path matching, especially for root routes.

Style active links using the function form of className or style props.

Avoid common mistakes like missing router context or incorrect active link styling.