Open In App

Link and NavLink components in React-Router-Dom

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The <Link> and <NavLink> are the components for anchor tags replacement provided by react-router-dom to navigate around the react application. Generally, we use anchor tags for this purpose while navigating.

Anchor tags will reload the page and re-render all the components. While <Link> and <NavLink> will only re-render updated components matched with the URL path of the Route without reloading. It helps the Single-Page Applications to work faster while routing.

<Link> Component Props:

  • to: String or object that specifies the pathname.
  • replace: Replaces the pathname in the history stack with new.
  • innerRef: Passes ref to the element rendered by the component.

<NavLink> Component Props:

  • to, replace, innerRef same as the Link Component.
  • className: Specifies the CSS class name you want to apply to the element when active.
  • isActive: Returns boolean value whether the link is active or not.
  • style: To apply inline CSS.
  • end: Match the pathname precisely with the URL.

A <NavLink> is a special kind of <Link> that knows whether or not it is “active”. Now, let’s understand this with the help of an example. 

Prerequisites:

Steps to Create React Application And Installing Module:

Step 1: Create a new react application using the following command in the terminal:

npx create-react-app <project_name>

Step 2: Go to the project folder by the following command:

cd <project_name>

Step 3: Install dependency react-router-dom using the following command:

npm i react-router-dom

Note: To check whether the dependency has been installed or not , go to package.json and checkout in the dependencies. 

Step 4: Create a new folder named components in the src folder and add Home.js, About.js and Contact.js files to it.

Project Structure:

The updated dependencies in package.json file,

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: This example will demonstrate the use of Link and NavLink components in React-Router-Dom

Javascript




// Filename - App.js
 
import React from "react";
import {
    BrowserRouter,
    Routes,
    Route,
    NavLink,
} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
 
function App() {
    return (
        <>
            <BrowserRouter>
                <div
                    style={{
                        display: "flex",
                        background: "black",
                        padding: "5px 0 5px 5px",
                        fontSize: "20px",
                    }}
                >
                    <div style={{ margin: "10px" }}>
                        <NavLink
                            to="/"
                            style={({ isActive }) => ({
                                color: isActive
                                    ? "greenyellow"
                                    : "white",
                            })}
                        >
                            Home
                        </NavLink>
                    </div>
                    <div style={{ margin: "10px" }}>
                        <NavLink
                            to="/about"
                            style={({ isActive }) => ({
                                color: isActive
                                    ? "greenyellow"
                                    : "white",
                            })}
                        >
                            About
                        </NavLink>
                    </div>
                    <div style={{ margin: "10px" }}>
                        <NavLink
                            to="/contact"
                            style={({ isActive }) => ({
                                color: isActive
                                    ? "greenyellow"
                                    : "white",
                            })}
                        >
                            Contact
                        </NavLink>
                    </div>
                </div>
                <Routes>
                    <Route
                        exact
                        path="/"
                        element={<Home />}
                    />
                    <Route
                        exact
                        path="/about"
                        element={<About />}
                    />
                    <Route
                        exact
                        path="/contact"
                        element={<Contact />}
                    />
                </Routes>
            </BrowserRouter>
        </>
    );
}
 
export default App;


Javascript




// Filename - components/Home.js
 
import React from "react";
const Home = () => {
    return (
        <>
            <h1 style={{ color: "green" }}>
                Welcome to GeeksForGeeks
            </h1>
        </>
    );
};
 
export default Home;


Javascript




// Filename - components/About.js
 
import React from "react";
const About = () => {
    return (
        <>
            <h1 style={{ color: "green" }}>
                A Computer Science portal for geeks.
            </h1>
        </>
    );
};
 
export default About;


Javascript




// Filename - components/Contact.js
 
import React from "react";
const Contact = () => {
    return (
        <>
            <h1 style={{ color: "green" }}>
                This is a Contact Page.
            </h1>
        </>
    );
};
 
export default Contact;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser.



Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads