Link

NavLink

Link is the most basic component that React Router gives us to create links. When we use Link, we can think of it as the React version of the <a> tag in HTML, which allows us to create links to other pages.

Syntax:

<Link to="/path/to/link">Link text</Link>

Parameters:

link: A `<Link>` is a Component in React Router used for “client-side routing”. The `<Link>` Component is equivalent to the `<a>` tag in HTML, that is when the `<Link>` Component renders in the DOM, it returns the normal `<a>` tag.
to: The to prop is the path to the page that you want to link to. The Link component will render an a tag with the specified href.

Example: the following code would render a link to the /about page:

<Link to="/about">About</Link>

You can also use variables in your JSX to create dynamic links that change based on the state of your application. For example, the following code would render a link to the /users/:id page, where id is the value of the userId variable:

const userId = 123;
<Link to={`/users/${userId}`}>User {userId}</Link>

You can also use the Link component to navigate to a different route programmatically. For example, the following code would navigate to the /about page when the handleClick function is called:

const handleClick = () => {
  navigate("/about");
};
<button onClick={handleClick}>About</button>

Features:

The Link component in React Router is a declarative way to navigate between routes. It is similar to the anchor tag in HTML, but it has some additional features that make it more suitable for single-page applications.

Here are some of the features of the Link component:

It allows you to navigate to a different route without refreshing the page.
It preserves the browser history, so users can go back and forth between pages.
It can be used to navigate to routes that are nested within other routes.
It can be used to pass parameters to routes.
It can be used to disable navigation to certain routes.
It can be used to style links using CSS.

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

Javascript

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

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

const App = () => (
<Router>
    <div>
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
                <li>
                    <Link to="/contact">Contact</Link>
                </li>
            </ul>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
    </div>
</Router>
);

export default App;

Output:

When you run the React application, it will render a web page with navigation links (Home, About, Contact) at the top.
Clicking on any of these links will render the corresponding component (Home Page, About Page, Contact Page) below the navigation bar, without reloading the entire page.

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