In this article I am going to show you how you can get active URL link using React hook named useRouter.

 

In your component, need to import useRouter hook.

 

import { useRouter } from 'next/router';

 

Inside your function you need to define a variable and initialize with this hook

 

const router = useRouter();

 

useRouter return an object. There is a property called pathname.And this is your currently active URL.

 

You can see by console log or use in any other purpose.

 

Now, I am going to see this pathname by printing on webpage.

import React from "react";
import { useRouter } from "next/router";

export default function Test() {
  const router = useRouter();
  return <h1> Current URL: {router.pathname}</h1>;
}