usePathname
useRouter
useParams
usePathname is a Client Component hook that lets you read the current URL's pathname.
to add a class to the active link, you can check if the current pathname matches the href of the link
const pathname = usePathname()
className={
link ${pathname === '/about' ? 'active' : ''}}A Client Component with usePathname will be rendered into HTML on the initial page load. When navigating to a new route, this component does not need to be re-fetched. Instead, the component is downloaded once (in the client JavaScript bundle), and re-renders based on the current state.
The useRouter hook allows you to programmatically change routes from Client Components.
Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
const router = useRouter()
useParams is a Client Component hook that lets you read a route's dynamic params filled in by the current URL.
useParams does not take any parameters.
const params = useParams()