NavLink

Difference between Link and NavLink in React:

NavLink is another component that allows us to create links, but with additional capabilities. For example, with NavLink, we have the ability to know whether our link is in an “active” or “pending” state. We can adapt these states to our needs in order to display the link status differently. For example, we can change our CSS styles according to the link status.

Syntax:

Here is an example of how to use the activeClassName prop to add a CSS class to the active link:

<NavLink to="/" activeClassName="active">Home</NavLink>

This code will add the CSS class “active” to the Home link when it is active.

You can also use the activeStyle prop to apply inline CSS to the active link:

<NavLink to="/" activeStyle={{ color: "red" }}>Home</NavLink>

This code will make the Home link red when it is active.

Features

Here are some of the features of NavLink:

ActiveClassName: This prop takes a string and adds the specified class name to the link when it’s active. You can use this prop to create a style that will be applied when the NavLink is active.
ActiveStyle: This prop takes an object of CSS styles and applies them to the link when it’s active. You can use this prop to style the active link in any way you want.
CaseSensitive: This prop takes a boolean value and determines whether the matching logic should be case sensitive. By default, the matching logic is case insensitive.
Exact:This prop takes a boolean value and determines whether the match should be exact. By default, the match is not exact.
Strict:This prop takes a boolean value and determines whether the match should be strict. By default, the match is not strict.
To: This prop takes a string and specifies the path to the route that the link should navigate to.

Examples: To demonstrate the usage of the NavLink component in a React application.

Javascript

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

// Components for different pages
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

// App component
const App = () => (
<Router>
    <div>
        {/* Navigation */}
        <nav>
            <ul>
                {/* NavLink components for navigation links */}
                <li>
                    <NavLink exact to="/">Home</NavLink>
                </li>
                <li>
                    <NavLink to="/about">About</NavLink>
                </li>
                <li>
                    <NavLink to="/contact">Contact</NavLink>
                </li>
            </ul>
        </nav>

        {/* Route definitions */}
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
    </div>
</Router>
);

export default App;

Output:

When you run this React application, it will render a web page with a navigation bar at the top.
The navigation bar will contain three links: “Home”, “About”, and “Contact”.
By default, the “Home” link will be active, and it will have special styling (which may vary depending on your CSS or any custom activeClassName styles you’ve defined).
When you click on the “About” or “Contact” links, the corresponding components (About Page or Contact Page) will be rendered below the navigation bar, without a full page reload.
The clicked link will become active, and React Router will apply special styles to indicate the active link.

Difference Between NavLink an& Link

The Link and NavLink components are both provided by the React Router library and are used to create links in React applications. Link and NavLink are two main components in the React Router library, whose purpose is to create links in our application. The main difference between them is that Link provides a basic link to any URL, while NavLink offers additional capabilities that can enhance your user experience.

Table of Content

Link
NavLink
Difference between Link and NavLink in React

Tags:

#ReactJS-Router #ReactJS #Web Technologies

Link

Difference between Link and NavLink in React:

NavLink

Syntax:

Features

Difference Between NavLink an& Link

Similar Reads