Hey everyone!
Let’s say I have a table in my ui
and it lists all currently active contracts of the same Template
@ app/template
. Each row has a unique name.
Using Link router I can click on a button that takes me to a new page @ app/template/view
to view all of the details of that particular contract.
<Button
component={RouterLink}
color="primary"
to={{
pathname: "/app/template/view",
state: {
proposalName: getValue(c, "payload.proposalName"),
columnsDetails: columnsDetails
}
}}
>
{getValue(c, "payload.proposalName")}
</Button>
The problem is that once the /app/template/view
is refreshed, the page crashes because the props.location.state
from history are lost.
`
TypeError: Cannot destructure property ‘templateName’ of ‘props.location.state’ as it is undefined.
`
I have seen some threads suggesting to transfer props from location to local state history on the first load of the page, so that they are available if the page refreshed or recalled later on. I haven’t been able to make this work yet.
Has anyone else dealt with a similar issue and how did you go about fixing the issue?