Get URL pathname in nextjs

by

If you want to access the router object inside any functional component in your app, you can use the useRouter hook, here’s how to use it:

import { useRouter } from 'next/router'

export default function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  }

  const handleClick = e => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

If useRouter is not the best fit for you, withRouter can also add the same router object to any component, here’s how to use it:

import { withRouter } from 'next/router'

function Page({ router }) {
  return <p>{router.pathname}</p>
}

export default withRouter(Page)

https://nextjs.org/docs/api-reference/next/router#userouter

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  3. How to access files uploaded to the public folder in Next.js?
  4. Can’t import SVG into Next.js
  5. NextJS environment variables aren’t working
  6. Next.js – Error: only absolute urls are supported
  7. Target Active Link when the route is active in Next.js
  8. Nextjs: Unable to load images from static folder
  9. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  10. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  11. How to setup i18n translated URL routes in Next.js?
  12. NextJs CORS issue
  13. How does the revalidate process in Incremental Static Regeneration work?
  14. How to type a page component with props in Next.js?
  15. How to hash CSS class names in Nextjs?
  16. Persistent navigation in a NextJs _app
  17. Dynamically build classnames in TailwindCss
  18. How to dynamically import non-React client side libraries in Next.js?
  19. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  20. Loading Screen on Next.js page transition
  21. Next.js router is returning query parameters as undefined on first render?
  22. How to detect window size in Next.js SSR using react hook?
  23. Unable to load images from static folder
  24. Next Image not taking class properties
  25. How to handle login failed error in NextAuth.js?
  26. How do I access refs of a child component in the parent component
  27. React onClick and preventDefault() link refresh/redirect?
  28. How do I convert a string to jsx?
  29. react app showing empty page when redirecting on production build
  30. Jest setup “SyntaxError: Unexpected token export”

Leave a Comment