CODEWITHSUNDEEP
reactjsreactjs-fluxreact-router
knowbody
knowbody

Reputation: 8276

Pass object through Link in react router

Is it possible to pass an object via Link component in react-router?

Something like:
<Link to='home' params={{myObj: obj}}> Click </Link>

In the same way as I would pass props from the Parent to Child component.

If it's not possible what is the best way of achieving this:
I have a React + Flux app, and I render the table with some data. What I am trying to do is when I click on one of the rows it would take me to some details component for this row. The row has all of the data I need so I thought it would be great if I could just pass it through Link.

The other option would be to pass the id of the row in the url, read it in the details component and request the data from the store for by ID.

Not sure what is the best way of achieving the above...

Upvotes: 45

Views: 69219

Answers (8)

ALFRED OKORONKWO
ALFRED OKORONKWO

Reputation: 1

Here is how you could pass the post using state.

<Link to={{pathname: `/blog/${post.id}`}} state={{post: post}}>Read More...</Link>

To access it from the destination component:

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

const location = useLocation();
console.log(location.state.post)

Upvotes: 0

ganiular
ganiular

Reputation: 629

Yes it is possible to pass object via Link component in react. All you have to do is to pass the object to state property of the component

<Link to='home' state={{myObj: obj}}> Click </Link>

Then after that you can access the object using useLocation() hook. Note that the object should be access in the path as defined in the Link to perperty

const {state} = useLocation();
console.log(state); // {myOgj: obj}

Upvotes: 0

P-A
P-A

Reputation: 1278

Using react-roter-dom ver 5.1.2 and es6

I solved the problem like this first I store it in the search part of Link to object meaning it is part of the url and supports a bookmark etc.

< Link to={{
          pathname: `${match.url}/${dogName}`,
          search: `choosenDog=${JSON.stringify({ ...dog })}` //dog is the object to pass along
        }
        } >

And then on the link we goto I get hold of it like this

const query = useQuery();
const dogString = query.get('choosenDog');
const dogObject  = JSON.parse(dogString);

Upvotes: 0

Pixelomo
Pixelomo

Reputation: 6737

It is possible to pass an object through a Link. (it's not best practice, but it's possible)

Add your data within a query rather than params and stringify the object: 

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

Then in your child component parse the string back in to an object:

JSON.parse(this.props.comments)

Upvotes: 15

mzdv
mzdv

Reputation: 827

You could try JSON serializing it and then de-serializing it on the receiving end.

Upvotes: 1

knowbody
knowbody

Reputation: 8276

So my final conclusion on this question is that I didn't think it through properly. It seemed natural just to pass my data through the Link so I can access them in my Child component. As Colin Ramsay mentioned there is something called state in the Link but that's not the way to do it. It would work fine when the data is passed through Link only if the user clicks on something and is taken to the Child component.

The problem comes when the user accesses the url which is used in Link then there is no way to get the data.

So the solution in my case was to pass the ID in Link params and then check if my Store has the data (user accesses it via Link) and then getting this data from the Store.

Or if the data is not in the Store call the action to fetch the data from the API.

Upvotes: 42

Colin Ramsay
Colin Ramsay

Reputation: 16466

This isn't possible, you need to pass something that can be stored in the URL such as a string ID. You would then use that ID to perform a lookup of the object.

Upvotes: 3

Hal Helms
Hal Helms

Reputation: 684

No, you can't pass an object in params, so I would agree with you that your best plan is to pass the id to a store, have the store emit a CHANGE event, and have components query the store for info.

Upvotes: 12

Related Questions