I have 2 components and i need to route between them and passing data from the first to the second and not send the param in the url. but my problem is when I refresh the page the query params get lost.
<p className={styles.jobname}>
<Link
href={{
pathname: `alyDeal/` + `${jobId}`,
query: {
jobName,
desc,
subcat,
city,
est,
bids,
userId,
name,
picture,
jobId,
jobImages,
budget,
neigh,
score,
phone,
email,
deadline,
jobAddress,
createdAt,
ownedBus,
category,
},
}}
as={`/alyDeal/${jobId}`}
passHref={true}
>
{jobName}
</Link>
</p>
and in the second component
export const getServerSideProps = async (context) => {
{
const { query } = context;
return { props: { query } };
}
const { query } = props;
console.log(query);
and the query always returns only the id that I'm passing directly into the URL but not the rest of the query object
Any solutions? };
Why don't read the query directly in the page? You don't need to use props.
function MyComponent() {
const router = useRouter()
const { query } = router
// use the query data
return (
<div>JSON.stringify(query)</div>
)
}