Link Component in React Router - GeeksforGeeks (2024)

Last Updated : 05 Mar, 2024

Summarize

Comments

Improve

React Router is a powerful library in ReactJS that is used to create SPA (single-page applications) seamlessly. One of the components of the React Router is Link.

In this article, we will be seeing the working of the Link component, various props, and usage of the Link component within React Router in developing Single Page Applications.

Table of Content

  • Working of Link Component:
  • What are Props ?
  • What is ‘to’ prop ?
  • What is ‘reloadDocument’ prop ?
  • What is ‘replace’ prop ?
  • What is ‘preventScrollReset’ prop ?
  • Parsing Attributes
  • Use of Link Component

Prerequisites:

  • React JS
  • React Router
  • JavaScript

Working of Link Component:

The link component is used for Routing from one page to another page without loading the page itself. This happens with the help of the react-router-dom module which contains (Browser Router, Routes, and Route) along with the Link component. So, when a user clicks on a link to navigate to another page, then that path is captured by the link component and compared with the path of the components wrapped inside the router. If it matches, then that page is rendered without any reload.

What are Props ?

In react, the components have some properties which are known as props to customize their behavior. The Link components have several props that help to control their behavior during navigation. let us see the different types of props and their examples.

What is ‘to’ prop ?

This is the most used props for routing. It helps in specifying the target location to which the link should navigate. It can be a string representing the path name or an object with path name. When you click on Dashboard you will be redirected to that component.

Syntax of ‘to’ prop:

<Link to = "/dashboard"> 
Dashboard
</Link>

What is ‘reloadDocument’ prop ?

This prop controls whether a full page reload should occur when the link is clicked. setting it true will reload the page which can be useful in certain cases.

Syntax of ‘reloadDocument’ prop:

<Link to = "/contactUs" reloadDocument = {true}>
Contact
</Link>

What is ‘replace’ prop ?

When you use this prop with the link component, it means that when the user clicks on the link, the current page history in the browser will be replaced by the new one. means that the current page won’t be remembered in the history, assuming as if the user never visited that page ever.

Syntax of ‘replace’ prop:

<Link to = "/aboutUs" replace = {true} >
About
</Link>

This prop is used to overcome the default behavior of scrolling to the top position if navigated to another component. If suppose the user is reading a blog and he clicks on comment section with ‘preventScrollReset = {true}’ then the page will navigate to the comment section without resetting the scroll position. without ‘preventScrollReset’ the default behavior will scroll the user back to the top page when they navigate to a new location.

Syntax of ‘preventScrollReset’:

<Link to = "/blog" preventScrollReset = {true}>
Go to Blog
</Link>

Parsing Attributes

Sometimes it is important to pass additional attributes to the Link component. We can achieve this by passing the props directly to the Link Component. Here in the below example, I have added two additional props such as className for styling the link and target attribute to navigate to the location in new tab.

Syntax to pass attributes:

<Link to = "/home" className="home" target="_blank">
Home
</Link>

Use of Link Component:

  • First create the components that you want to navigate to. for example, Home.jsx
  • In your App.jsx, wrap the components inside a Router and define the routes using the Route component. Mention the path and element name inside the route for that respective component.
  • Create one more component (for example: Navbar.jsx) and render it inside Home.jsx, About.jsx and Contact.jsx this component contains the Link tag which has the exact same path (declared in variable “to”) as the route has in it.

Example: Below is an example of link component in React Router.

Javascript

// App.jsx

import {

BrowserRouter as Router,

Routes,

Route

} from "react-router-dom";

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

function App() {

return (

<>

<Router>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/contact" element={<Contact />} />

</Routes>

</Router>

</>

);

}

export default App;

Javascript

// Navbar.jsx

import React from "react";

import { Link } from "react-router-dom";

const Navbar = () => {

return (

<>

<div

className="nav"

style={{

display: "flex",

justifyContent: "space-evenly",

marginTop: "1rem",

color: "green",

fontWeight: "bolder",

fontSize: "1rem",

}}

>

<Link to="/">Home</Link>

<Link to="/about">About</Link>

<Link to="/contact">Contact Us</Link>

</div>

</>

);

};

export default Navbar;

Javascript

// Home.jsx

import React from "react";

import Navbar from "./Navbar";

const Home = () => {

return (

<>

<Navbar /> <br />

<div style={{

display: "flex",

justifyContent: "center"

}}>

This is

<span style={{ color: "green" }}>

GeeksForGeeks

</span>

Home

Page

</div>

</>

);

};

export default Home;

Javascript

// About.jsx

import React from "react";

import Navbar from "./Navbar";

const About = () => {

return (

<>

<Navbar /> <br />

<div style={{

display: "flex",

justifyContent: "center"

}}>

This is

<span style={{ color: "green" }}>

GeeksForGeeks

</span>

About Page

</div>

</>

);

};

export default About;

Javascript

// Contact.jsx

import React from "react";

import Navbar from "./Navbar";

const Contact = () => {

return (

<>

<Navbar /> <br />

<div style={{

display: "flex",

justifyContent: "center"

}}>

This is <span style={{ color: "green" }}>

GeeksForGeeks

</span>

Contact Page

</div>

</>

);

};

export default Contact;

Output:

Link Component in React Router - GeeksforGeeks (1)



K

kamranimazprq1fl

Link Component in React Router - GeeksforGeeks (2)

Improve

Next Article

Navigate Component in React Router

Please Login to comment...

Link Component in React Router - GeeksforGeeks (2024)
Top Articles
How can you answer the question about the most important challenges facing a project?
Seven Corners Travel Insurance Review (2024)
Katie Pavlich Bikini Photos
Gamevault Agent
Hocus Pocus Showtimes Near Harkins Theatres Yuma Palms 14
Free Atm For Emerald Card Near Me
Craigslist Mexico Cancun
Hendersonville (Tennessee) – Travel guide at Wikivoyage
Doby's Funeral Home Obituaries
Vardis Olive Garden (Georgioupolis, Kreta) ✈️ inkl. Flug buchen
Select Truck Greensboro
Things To Do In Atlanta Tomorrow Night
Non Sequitur
How To Cut Eelgrass Grounded
Pac Man Deviantart
Alexander Funeral Home Gallatin Obituaries
Craigslist In Flagstaff
Shasta County Most Wanted 2022
Energy Healing Conference Utah
Testberichte zu E-Bikes & Fahrrädern von PROPHETE.
Aaa Saugus Ma Appointment
Geometry Review Quiz 5 Answer Key
Walgreens Alma School And Dynamite
Bible Gateway passage: Revelation 3 - New Living Translation
Yisd Home Access Center
Home
Shadbase Get Out Of Jail
Gina Wilson Angle Addition Postulate
Celina Powell Lil Meech Video: A Controversial Encounter Shakes Social Media - Video Reddit Trend
Walmart Pharmacy Near Me Open
A Christmas Horse - Alison Senxation
Ou Football Brainiacs
Access a Shared Resource | Computing for Arts + Sciences
Pixel Combat Unblocked
Cvs Sport Physicals
Mercedes W204 Belt Diagram
Rogold Extension
'Conan Exiles' 3.0 Guide: How To Unlock Spells And Sorcery
Teenbeautyfitness
Weekly Math Review Q4 3
Facebook Marketplace Marrero La
Nobodyhome.tv Reddit
Topos De Bolos Engraçados
Gregory (Five Nights at Freddy's)
Grand Valley State University Library Hours
Holzer Athena Portal
Hampton In And Suites Near Me
Stoughton Commuter Rail Schedule
Bedbathandbeyond Flemington Nj
Free Carnival-themed Google Slides & PowerPoint templates
Otter Bustr
Selly Medaline
Latest Posts
Article information

Author: Lilliana Bartoletti

Last Updated:

Views: 6021

Rating: 4.2 / 5 (53 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Lilliana Bartoletti

Birthday: 1999-11-18

Address: 58866 Tricia Spurs, North Melvinberg, HI 91346-3774

Phone: +50616620367928

Job: Real-Estate Liaison

Hobby: Graffiti, Astronomy, Handball, Magic, Origami, Fashion, Foreign language learning

Introduction: My name is Lilliana Bartoletti, I am a adventurous, pleasant, shiny, beautiful, handsome, zealous, tasty person who loves writing and wants to share my knowledge and understanding with you.