Trying to pass an object through a Link Tag in NextJS 13

Question

I am trying to pass a price object through the next Link.

I keep getting undefined in the console. I have went through the docs and still am getting undefined. Code will be down below. I will also need help retrieving the price object on the calendar page.

Here is the console log of price for the PricingCard.jsx Console Log Here

PricingCard.jsx

<Link href={{
            pathname: '/calendar',
            query: {price: price.id}
          }} >
            <button
              className="mt-8 flex w-full justify-center rounded-md border border-transparent bg-[#f1592a] py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            >
              {" "}
              Schedule Today
            </button>
            </Link>

calendar page

import { useRouter } from "next/navigation";

export default function Calendar() {
  const router = useRouter();
  const price = router.query;
  console.log(price);

I am getting an undefined on the console.log on the calendar page.

Any help would be appreciated.

What does the `URL` look like? Does it look like `.../calendar?price=123`? — user16967562, May 18 '23 at 05:32
http://localhost:3000/calendar?price=price_1MukObIPblDJirEcC4TRFg58 — Brett Westwood, May 18 '23 at 05:49
Does this help https://stackoverflow.com/a/66162437/16967562? — user16967562, May 18 '23 at 06:14
I think its getting close to solving my problem but I don't think its working. I am assuming since my URL looks like that, then the problem is retrieving the query. — Brett Westwood, May 18 '23 at 06:23

score 0 · Answer 1 · answered May 18 '23 at 07:12

Here's a demo example: https://codesandbox.io/p/sandbox/reverent-goodall-cpdob9?file=%2F.codesandbox%2Ftasks.json%3A1%2C1

import {useRouter} from 'next/router'
import {useEffect, useState} from 'react'

export default function Calendar() {
  const [price, setPrice] = useState()
  const router = useRouter()
  
  console.log('On Root:', router.query)
  
  useEffect(()=>{
    if(!router.isReady) return;

    // codes using router.query
    console.log(router.query)
    setPrice(router.query.price)
}, [router.isReady]);
  
  return <span>
    price: {price}
  </span>;
}

And here are the logs:

Trying to pass an object through a Link Tag in NextJS 13

1 Answers1