Get URL pathname in nextjs

Question

I have a signin page and layout component.Layout component has header.I don't want to show header in signin .and for that I want to get url pathname.based on pathname show the header .

import * as constlocalStorage from '../helpers/localstorage'; import Router from 'next/router';  export default class MyApp extends App {     componentDidMount(){         if(constlocalStorage.getLocalStorage()){             Router.push({pathname:'/app'});         } else{             Router.push({pathname:'/signin'});         }      }      render() {         const { Component, pageProps } = this.props         return ( //I want here pathname for checking weather to show header or not                 <Layout>                     <Component {...pageProps} />                 </Layout>         )     } } 

please help

Answer 1

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