Tengo una página de inicio de sesión y un componente de diseño. El componente de diseño tiene un encabezado. No quiero mostrar el encabezado en el inicio de sesión.
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> ) } }por favor ayuda
Si desea acceder al objeto del router dentro de cualquier componente funcional en su aplicación, puede usar el useRouter , así es como se usa:
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> ) }Si useRouter no es la mejor opción para usted, withRouter también puede agregar el mismo objeto de enrutador a cualquier componente, así es como se usa:
import { withRouter } from 'next/router' function Page({ router }) { return <p>{router.pathname}</p> } export default withRouter(Page)Puede usar la propiedad asPath , que le dará la ruta (incluida la consulta) que se muestra en el navegador sin la configuración regional o basePath locale :
const { asPath } = useRouter()Supongamos que la URL completa de una página es 'abc.com/blog/xyz' y el nombre del archivo del componente que coincide con esta ruta es './pages/blog/[slug].js'
El gancho useRouter() devuelve un objeto de ruta, que tiene dos propiedades para obtener el nombre de la ruta.
Una es la propiedad asPath , y
Otra es la propiedad pathname .
La propiedad asPath contiene el nombre de ruta extraído de la URL, es decir /blog/xyz
pero la propiedad de nombre de pathname contiene el nombre de ruta de su directorio de proyecto, es decir, /blog/[slug] .
// .pages/blog/[slug].js import { useRouter } from 'next/router'; const BlogSlug = () => { const { asPath, pathname } = useRouter(); console.log(asPath); // '/blog/xyz' console.log(pathname); // '/blog/[slug]' return ( <div></div> ); } export default BlogSlug;