0

I'm trying to create two constants that contain the slug information from my dynamic page, but apparently useRouter from next/router has been thrown out of nextJS support. Would any of you know how to do this from here? I saw searchParams but that doesn't seem to work for my usecase. The link I would be checking is:

localhost:3000/breed/australian-shepherd

and the code is

"use client"; // This is a client component as otherwise useState wouldn't function

import React from 'react'
import { useRouter } from 'next/router';
import type { Metadata } from 'next'

export default function Breedpage() {

    const router = useRouter();
    const slug = router.query.slug; // Access the slug from the router's query object
  
    // Separate the first and second word using split()
    const [firstWord, secondWord] = typeof slug === 'string' ? slug.split('-') : ['', ''];


  return (
      <div>
        <h1>First Word: {firstWord}</h1>
      <h1>Second Word: {secondWord}</h1>    
      </div>
  )
}

Again, I apparently need an alternative to useRouter... Thanks for any help you can give, I'm somewhat clueless..

Rick
  • 11
  • 2

1 Answers1

0

useRouter() can be used from next/navigation

In addition, I tried using usePathname which returns /breed/australian-shepherd I also tried using useParams however that returned [object Object] which I'm unsure how to further utilize.

Lastly, check these pointer from the doc

enter image description here

Asad
  • 106
  • 1
  • 11