Read URL dynamic parameter/slug with Next.js in the app folder

Question

I have a problem getting the parameter inside Dynamic Routing. I keep getting errors when reading:

TypeError: Cannot destructure property 'themenID' of 'router.query' as it is undefined.

In addition, I cannot use next/router but have to integrate the router from next/navigation. But this one does not have the query property. I use Next.js version 13

The path is called like this: http://localhost:3000/MainThema/2.

app/MainThema/[themenID]/page.js:

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

export default function MainThema() {
  const router = useRouter();
  console.log(router);

  const { themenID } = router.query;

  return <div>MainThema </div>;
}

Answer 1

As you can read on the doc, your page.js component gets passed a params object when it's in a dynamic segment. And this params would contain your dynamic route id, like so:

// app/MainThema/[themenID]/page.js

export default function MainThema({ params }) {
  const { themenID } = params;

  return <div>{themenID}</div>;
}

And if you need to get it in some nested client component, you should use the useParams hook:

// app/SomeClientComponent.js

'use client';

import { useParams } from 'next/navigation';

export default function SomeClientComponent() {
  const { themenID } = useParams();

  return <div>{themenID}</div>;
}