Skip to content
Related Articles

Related Articles

Link and NavLink components in React-Router-Dom

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 31 May, 2022
View Discussion
Improve Article
Save Article

The <Link> and <NavLink> are the components provided by react-router-dom to navigate around the react application. Generally, we use anchor tags for this purpose while navigating. Then what’s the difference? Let’s find out.

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

Modules Required:

  • npm
  • create-react-app
  • react-router-dom

Creating React Application And Installing Module:

Step 1: Create a new react application by the following command using 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 install 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 folder structure will look like the following:

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

Home.js




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


About.js




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


Contact.js




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


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;


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

npm start

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!