Question 263473 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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/October 12, 2023

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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)}

  2. 0

    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 <></>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search