CODEWITHSUNDEEP
javascriptreactjsnext.js
Marc Fletcher
Marc Fletcher

Reputation: 1082

Cannot get url slug inside client component in Next 13

I have a client-side component in my next 13 app rendered under the route /journal/[date]

I cannot figure out how to get the date from the url. I've tried using

import { useRouter } from 'next/navigation';
const router = useRouter;
router.query // this property does not exist in next 13 app directory. this used to exist but only for the pages directory version of next.

I've also tried useSearchParams but that also doesn't work as that is concerned with query strings.

So what's going on? Is this a bug or a new feature-gap of Next 13 app directory?

Upvotes: 0

Views: 1696

Answers (2)

Marc Fletcher
Marc Fletcher

Reputation: 1082

I was able to bypass the hooks by getting the params in the component signature directly, love how incredibly tedious it was to find this, feel like this info absolutely should be co-located in the docs with the other stuff about useRouter but what do I know

export async function GET(_request, { params }) {console.log(params.slug)}

Upvotes: 0

Tushar Shahi
Tushar Shahi

Reputation: 20626

To get params from a page you can use useParams

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams()
 
  // Route -> /journal/[date]
  // URL -> /journal/22
  // `params` -> { date: '22' }
  console.log(params)
 
  return <></>
}

Upvotes: 1

Related Questions