/Javascript/Next.js/Get cuurent route name nextjs

Get cuurent route name nextjs

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const menu = [
  { title: 'Home', path: '/home' },
  { title: 'Explore', path: '/explore' },
  { title: 'Notifications', path: '/notifications' },
]

const Sidebar = () => {
  const router = useRouter()

  return (
    <div>
      {menu.map((item, index) => {
        return (
          <Link key={index} href={item.path}>
            <a
              className={`cursor-pointer ${
                router.pathname === item.path
                  ? 'text-blue-500'
                  : 'hover:bg-gray-900 hover:text-blue-500'
              }`}
            >
              {item.title}
            </a>
          </Link>
        )
      })}
    </div>
  )
}

export default Sidebar

Source: flaviocopes.com

Similar codes

0 vote331 views1 answer
Browserlist nextjs
Javascript Next.js
0 vote338 views1 answer
Pass object to query on Router.push NextJs
Javascript Next.js
0 vote308 views1 answer
Next js prerender error
Javascript Next.js
0 vote295 views2 answers
Mdb nextjs
Javascript Next.js
0 vote307 views1 answer
Next js newsletter
Javascript Next.js
0 vote305 views1 answer
How to make nextjs image component responsive
Javascript Next.js
0 vote364 views2 answers
How to reload page with router next js
Javascript Next.js
41 votes353 views2 answers
How to change port in next js
Javascript Next.js
11 votes350 views5 answers
Next js create app
Javascript Next.js
1 vote359 views2 answers
Next js ReferenceError: location is not defined
Javascript Next.js