Difference between NavLink and useNavigate hook ❤️

NavLink and useNavigate are two important utilities provided by the React Router library to manage navigation in a React application. While both serve the purpose of navigation, they are used in different contexts and offer distinct functionalities. In this article, we will explore the difference between them.

NavLink is a special kind of Link component in React Router that is used to create navigation links in your application. It allows for automatic styling of the active link, which is particularly useful for creating navigation menus where the active link needs to be highlighted.

Key Features

Automatic Active Styling: NavLink can apply a special style to the link that corresponds to the current route.
Exact Matching: We can specify whether the link should be considered active if it exactly matches the current route or if any sub-route matches.
Dynamic Styling: NavLink allows for dynamic styling through class names or inline styles based on whether the link is active.

Example: In this example we are creating navigation menu using NavLink.

JavaScript

// App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';

import { BrowserRouter } from 'react-router-dom'
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

import NavigationMenu from './components/NavigationMenu';

const App = () => {

  return (
    <BrowserRouter>
    <NavigationMenu />

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


      </Routes>
    </BrowserRouter>

  );
};

export default App;

JavaScript

// About.js
import React from 'react'

const About = () => {
    return (
        <h3>This is about page</h3>)
}

export default About;

JavaScript

// Contact.js
import React from 'react'

const Contact = () => {
    return (
        <h3>This is Contact page</h3>)
}

export default Contact;

Output:

The useNavigate hook is a programmatic way to navigate between routes in React Router. It returns a function that can be used to navigate to different routes. It allows us to create more complex navigation logic that might depend on certain conditions or events.

Key Features

Programmatic Navigation: Allows navigation based on events, conditions, or actions beyond simple link clicks.
Flexible Navigation Logic: Can navigate to routes dynamically based on application state or logic.
Supports Navigation Options: Allows passing state or options to the new route.

Example: In this example the useNavigate hook is used to get the navigate function. The handleButtonClick function uses navigate(‘/dashboard’) to programmatically navigate to the /dashboard route when the button is clicked.

JavaScript

// App.js

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

import { BrowserRouter } from 'react-router-dom'
import Dashboard from './components/Dashboard';
import LoginPage from './components/LoginPage';
const App = () => {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard/>} />
        <Route path="/" element={<LoginPage />} />

      </Routes>
    </BrowserRouter>
  );
};

export default App;

JavaScript

// LoginPage.js
 
import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/dashboard');
  };

  return (
    <>
      <h3>Welcome to w3wiki</h3>
      <button onClick={handleButtonClick}>
        Go to Dashboard
      </button>
    </>

  );
}
export default LoginPage;

JavaScript

// Dashboard.js

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

const Dashboard = () => {
  return (
    <div>
      <h2>Hello Geek welcome to Dashboard</h2>
    </div>
  );
};

export default Dashboard;

Output:

Feature	NavLink	useNavigate
Primary Use Case	Navigation menus, links	Programmatic navigation
Navigation Style	Declarative	Imperative
Active Styling	Yes	No
Dynamic Routes	Limited	High flexibility
State Passing	No	Yes
Complex Logic	Not suitable	Not suitable

Use NavLink when you need simple navigation links, especially in a navigation menu where you want to highlight the active route automatically.
Use useNavigate when you need to navigate based on user actions, events, or other conditions that require more complex logic or dynamic routing.

Difference between NavLink and useNavigate hook

NavLink Component

Key Features

useNavigate Hook

Key Features

Difference between NavLink and useNavigate

When to Use Which?

Contact Us