DEV Community

Cover image for Passing Data with React Router using Link
Mohamed Amine Fh
Mohamed Amine Fh

Posted on

Passing Data with React Router using Link

If you've used React Router on many projects, definitely you've asked How i can pass some data or state to other components through a link tag?.

So 1st of all we'll discuss how we can pass data between components in React.

1. Passing props

The 1st one is by passing some props from the parent component to the children components

carbon (4)

carbon (3)

2. Global State

2nd one is by making a Global State and make some data accessible by many components.

You can manage Global State using two main paths:

3. Using React Router's Link

3rd one is basically when you click on a link(to component), you passing data with that.

Below we Have a simple React App with some routes
App

We Have two routes Here the "/"(Home) Route and the "/profile"(Profile) route.

So the 1st page we'll see if we run yarn start is the Home Page

Home

Screenshot from 2021-10-01 13-11-24

And if we go to the /profile route
we'll see the Profile component

Profile

Screenshot from 2021-10-01 13-12-15

So as you can see we're using the <Link> instead of the regular <a> tag to prevent the refresh of the page.

So how we can send data for exemple to the Profile component from the Home component ?

So the cool thing is we can pass an Object to the to property in the <Link> and that object must contains a pathname and optionally a state, and we can pass the data through that state

Screenshot from 2021-10-01 13-41-45

and we can access that state in the Profile component in the props.location.state

Screenshot from 2021-10-01 13-45-07

Screenshot from 2021-10-01 13-46-47

for more Info check this React Router Link

Top comments (10)

Collapse
 
fjones profile image
FJones

It's worth noting that state doesn't work with HashRouter. Which is a significant restriction if you want to both maintain direct jumpins and have a single terminal server entry point.

Collapse
 
fluxthedev profile image
John

Thank you! I'm stuck with hashrouter as this bank cms / ecommerce de-d to use iframes for custom code -.-

Collapse
 
bessymazurek profile image
Bessy Mazurek

Hey thanks for the super helpful reply. I'm not sure how I missed that thread. I haven't quite mastered the search function on here. I think I'll pass with him this time around.If i have any confusion i'll contact you here. We research and write about area codes and many more authentic information here such as eightyreviews.com/938-area-code/. For Official Helps You May contact Us Here eightyreviews.com/.

Collapse
 
nishadmm profile image
NISHAD.M.M

Nice information dude👏

Collapse
 
beko09 profile image
abobaker hilal

Can use hook useLocation() from react-router-dom to access state

Collapse
 
ryanflorence profile image
Ryan Florence

Yes, it's like a hidden piece of the URL, available on location.state even after a refresh.

Collapse
 
nelsieborja profile image
Nelsie Borja

And how to reset it in a proper way?

Collapse
 
ercumentlacin profile image
ercüment

when the third method is applied, if you refresh the page the state will be undefined.

Collapse
 
ryanflorence profile image
Ryan Florence

That's not correct. It will be there since its stored in the browser's session memory, not your application's. It will be there until you close the browser (or a new tab). It's like a hidden piece of the URL.

Collapse
 
medaminefh profile image
Mohamed Amine Fh

Actually that's how react works, if you refresh the page in any component, the state will reset.
if you're trying to send some data (you get it from the server using fetch API) to another component, and you want to refresh the page or to handle the page from crushing, just fetch again that specific data.