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

Reactjs – How to get the id from the router.push in nextjs in the other page?

everyone. Im having trouble to access the id that from the dynamic page in Next.js in the Edit project page. This is my folder

enter image description here

I have this component so I can navigate to the Edit project page

"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";

interface EditProjectProps {
  editProjectId: string;
}
export const EditProject = ({ editProjectId }: EditProjectProps) => {
  const router = useRouter();

  const editProject = () => {
    //Go to Edit project page
    router.push(`/user/projects/${editProjectId}`);
  };
  return (
    <Button variant="ghost" onClick={editProject}>
      <Image
        src="/images/EditIcon.png"
        alt="Edit Icon"
        width={20}
        height={20}
      />
    </Button>
  );
};

Till now everything its okay this is the Url that appears after navigating user/projects/669120f48be2051c82f359c3
Now how can I access the id from the url to the page cause I need it to call and api to fetch the data project for this id. I have been using router.query but im having an error

 const { editProjectId } = router.query;

Property 'query' does not exist on type 'AppRouterInstance'

Thank you I hope you will help me!

Tags:

2

Answers


  1. 0

    In order to access the route params in a Client Component you must use the useParams hook. For example:

    'use client'
 
import { useParams } from 'next/navigation'
 
export default function EditProject() {
  const params = useParams<{ editProjectId: string; }>()
 
  // `params` -> { editProjectId: '669120f48be2051c82f359c3' }
  console.log(params)
 
  return <></>
}

    Another way of doing this could be extracting the param in your page.tsx and passing it down as a prop. Something like:

    export default function Page({ params }: { params: { editProjectId: string } }) {
  return <EditProject id={params.editProjectId} />
}
    Login or Signup to reply.
  2. 0

    I believe what you are looking for is documented here: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

    Something like this should work but I haven’t tested!

    "use client";

import Image from "next/image";
import {
  Button
} from "../ui/button";
import {
  useRouter
} from "next/navigation";

export const EditProject = ({
      params
    }: {
      params: {
        editProjectId: string
      }) => {
      const router = useRouter();
      console.log(params.editProjectId)
      const editProject = () => {
        //Go to Edit project page
        router.push(`/user/projects/${editProjectId}`);
      };
      return ( <
        Button variant = "ghost"
        onClick = {
          editProject
        } >
        <
        Image src = "/images/EditIcon.png"
        alt = "Edit Icon"
        width = {
          20
        }
        height = {
          20
        }
        /> <
        /Button>
      );
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search