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
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.
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.
NavLink
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.
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 Link and NavLink in React:
Features | Link | NavLink |
|---|---|---|
Porpose | Creates a link to a different route in the application | Creates a link to a different route in the application and provides additional styling options |
HTML element rendered | <a> | <a> |
Additional props | None | activeClassName, activeStyle, isActive, exact |
Use cases | For basic navigation links | For navigation links that need to be styled differently based on their active state |
Active Link Behavior | All links behave the same regardless of their activity. | Allows for styling and behavior changes based on the active link. |
Example | `<Link to="/about">About</Link>` | `<NavLink to="/about" activeClassName="active">About</NavLink>` |
Summary
In the end, both Link and NavLink allow us to create links to different pages in our application, but NavLink offers us more advanced capabilities, such as the ability to display different styles for the link depending on whether we are on its path or not. The use of each component depends on your needs: if you need a simple link, Link will be sufficient. If you need more control over the appearance of the link, NavLink will be the right choice.