Question 206386 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How I pass data between one component to another in Nextjs 13 with App Router?

Problem Statement: In NextJS 13 with app router, I want to pass data from "/experimental" to dynamic route "/experimental/${id}. It gives me ‘router.query’ as it is undefined.

I tried using ‘next/navigation’ in the nextjs 13 with app router. I can’t pass the data to one component to another.

Cards.jsx

'use client'
 
import { useRouter } from 'next/navigation'
import React from "react";

const Cards = ({ items }) => {

  const router = useRouter()
  
  const handleCardClick = (id) => {
    router.push(`/experimental/${id}`);
  };

  return (
    <div>
      
        <div className="mx-5  lg:mx-10">
          <div
            className="w-full h-[30rem] md:h-[25rem]  lg:h-[20rem] items-center bg-contain bg-no-repeat"
            style={{ backgroundImage: `url('${items.imageUrl}')` }}
            onClick={() => handleCardClick(item.id)}
          >
            <div className="bg-[#23272a93] relative z-0 w-32 mb-4 ml-4 h-11 text-center items-center flex rounded-sm justify-center ">
              <p className="text-base-100 uppercase">{items.cardType}</p>
            </div>
          </div>
          <div className="flex flex-row mt-4 justify-between">
            <h2 className="font-normal text-[1.5rem] md:text-[1.4rem] lg:text-xl basis-2/3">
              {items.title}
            </h2>
            <p className="font-bold text-2xl lg:text-xl basis-1/3 text-right md:text-left lg:text-right">
            ৳{items.price}
            </p>
          </div>
          {/* <p>Popularity: {items.popularity}</p> */}
        </div>
   
    </div>
  );
};

export default Cards;

When I click the component it will navigate to the dynamic link "/experimental/${id}". It gives me an error

[id]/page.jsx

'use client'
import { useRouter } from 'next/navigation'
import React from 'react'

const Page = () => {
  const router = useRouter();
  const { id } = router.query; 

  return (
    <div>
      <h1>Experimental Card Details</h1>
      <p>Card ID: {id}</p>
    </div>
  );
}

export default Page

Unhandled Runtime Error
TypeError: Cannot destructure property ‘id’ of ‘router.query’ as it is undefined.

srcappexperimental[id]page.jsx (7:10) @ id

   5 | const Page = () => {
   6 | const router = useRouter();
>  7 | const { id } = router.query; 
     |        ^
   8 | 
   9 | return (
  10 |   <div>
Tags:

2

Answers


  1. 0

    This is how I handle params and queries in the App router

    your case

    export default async function Page({
  // your dynamic value in this case [id]
  params 
})

    In case you have searchParams eg [id]?ref=foo-bar

    typescript:

    export default async function Page({
  // dynamic route params
  params,
  searchParams,
}: {
  // [id] in your case
  params: { id: string };
  searchParams: { ref: string };
})

    Check the NextJs documentation for details

    You implementation should be like this

    // note that this will be a RSC, therefore no need for 'use client' directive
import React from 'react'

const Page = ({ params }) => {
  const id = params.id 

  return (
    <div>
      <h1>Experimental Card Details</h1>
      <p>Card ID: {id}</p>
    </div>
  );
}

export default Page
    Login or Signup to reply.
  2. 0

    router in next/navigation doesn’t support query parameter. Use useParams instead.

    Invoke as

    <Link href={"/experimental/123"}>
    button
</Link>

    Receive as

    export default function Page({ params }: { params: { id: string } }) {
    return <h1>{params.id}</h1>;
 }

    Also refer

    1. https://stackoverflow.com/a/76609568/13431819
    2. https://stackoverflow.com/a/76613628/13431819
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search