Pass object through Link in react router
Solution 1
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.
Solution 2
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)
Solution 3
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.
Solution 4
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.
Solution 5
You could try JSON serializing it and then de-serializing it on the receiving end.
knowbody
Hacker, software engineer. Addicted to coke, volleyball and programming. React fan. GitHub Twitter
Updated on October 29, 2020Comments
-
knowbody over 3 years
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 theParent
toChild
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 throughLink
.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...
-
Colin Ramsay almost 9 yearsThe only alternative would be to pass the object as JSON but either way you would still be storing it in a form that gets stored in the URL. There's also a state prop for Link that you could look at but it's not the same thing.
-
Misi over 7 yearsIn react-router 3.0.0 the Link component doesn't have the "params" attribute. How is it done for the current version ?
-
amdev over 5 yearsbut you need to refer to the react router official documentation to see how to pass object ot
to
prop on link , it is the same forNavLink
no difference here , yours are a little bit off of that but any way , upvoted... , but please update your answer for avoiding the future misguides .... -
Pixelomo over 5 years@a_m_dev thanks could expand on what you said? maybe posting your own answer based on what you saw on the docs would help future readers. looking at these docs reacttraining.com/react-router/web/api/NavLink
-
Ren over 5 years@Pixelomo, How is the query object accessible in the component that the route renders?
-
Pixelomo over 5 years@Ren see the end of my answer
JSON.parse(this.props.comments)
-
Mukul Juneja almost 5 yearsTry finding it under this.props.location.query.title . And you will be able to access the value.
-
Jordan Robertson over 4 yearsWhat is a proper use case for the "state" property in Link if it won't work when the URL is accessed directly?