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
// 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 w3wiki </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 Beginner. </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.
Contact Us