Categories
28°C, New York
Home ReactJS NavLink Component

NavLink Component

useNavigate Hook

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:

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.

Similar Reads

NavLink Component

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

useNavigate Hook

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

Difference between NavLink and useNavigate

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

When to Use Which?

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

Tags:
#ReactJS

useNavigate Hook