Reactjs

How to pass parameters in react-router-dom Link?

Pass data from one component to another component with react-router (v5) Link Component.

How to pass parameters in react-router-dom Link

Hey, my name is Rajdeep Singh. In this react post, I’m telling you How to pass a parameter, state, props, and value in the react-router-dom Link Component.

{/* Link tag With out parameter in reactjs */}
<Link to="/about">About</Link>

More Read About Link Component: Click Here
Github for download code: Click Here
Demo and Download Code on Codesandbox.io

Demo:

Demo

Latest blog post on react-router v6

How to pass state or data in react-router v6

Let’s Start

pass parameters in react-router-dom Link Component with two basic steps.

Step:1. Declare
Step:2. Access

Step:1.

Declare mean how to write code and pass parameter, state, props, and value.

How is it possible?

Simple when Creating a link component to react, inside to=”/about” we pass an object. In this object, we pass some properties.

1. pathname: A string representing the path to link.
2. search: A string representation of query parameters.
3. hash: A hash to put in the URL, e.g. #a-hash.
4. state/any name: Inside State to value.

In my case, I pass state, But you pass any value.

Example:

{/* Link component Without parameter */}
 {/* <Link to="/about">About</Link> */}

<Link   to={
  {/* this object inside the  tag */}
       {     
         pathname: '/read',
         state:this.state
        }
  }> 
<Card.Link  >Another Link</Card.Link>
</Link>

Step:2.

Access means how to access Link Component State we Declare previous.

But How to Access it?

It is straightforward. We use a react-router-dom hook to access the state. In the first step, we import the useLocation Hook. The inside hook shows all properties. After accessing all properties with the object. check out code

Check out with console.log()

useLocation Hook with console

code

import React from "react";
import Card from "react-bootstrap/Card";
import CardGroup from "react-bootstrap/CardGroup";
import {Link, useLocation} from "react-router-dom";
function Read() {
let location = useLocation();
console.log(location);
return (
<>
<Link to="/">
<Card.Link>
   <h1 className="mt-3">Back... </h1>
</Card.Link>
</Link>
<CardGroup>
<Card>
<Card.Img
variant="top"
style={{width: "100%", height: "400px", margin: "auto"}}
src="https://source.unsplash.com/random"
/>
<Card.Body>
<Card.Title className="mt-5">Card by read</Card.Title>
<Card.Text>
{location.pathname} <br />
{location.state.earn} <br />
{location.state.love} <br />
{location.state.name} <br />
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</Card.Text>
</Card.Body>
</Card>
</CardGroup>
</>
);
}
export default Read;

Read More:

Create Modern Quiz With React Js

How to read local JSON files in react js?

what is angular 8

Demo here

demo with code sandbox live app

First demo: Click Here
Second demo: Click Here

Conclusion:

Sometimes our requirement passes value and props inside the link Component. use react-router-dom useLocation hook access all properties

Check My Second Demo With a real-life senior. In this project, I pass the id inside the link Component after accessing that Id. Uses Axios to get data based on Id.

Thanks for Reading 😆