Link and NavLink components in React-Router-Dom
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
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
import React from "react" ;
const Home = () => {
return (
<>
<h1 style={{ color: "green" }}>
Welcome to GeeksForGeeks
</h1>
</>
);
};
export default Home;
|
Javascript
import React from "react" ;
const About = () => {
return (
<>
<h1 style={{ color: "green" }}>
A Computer Science portal for geeks.
</h1>
</>
);
};
export default About;
|
Javascript
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
Share your thoughts in the comments
Please Login to comment...