reactjsnext.js

Get URL pathname in nextjs


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


Solution

  • 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