Tengo un componente que necesito para obtener la URL completa actual, aquí está la versión simplificada:
/** * Share dropdown component */ export const ShareDropdown: React.FC<{ className: string }> = ({ className, }) => { return ( <div className={className}>{currentURL}</div> ) }Busqué en Google y vi que algunos decían usar el enrutador de Next (pero no vieron que devolviera el dominio), otros usaban getInitialProps pero no vieron cómo incorporarlo a un componente funcional.
Nuevo en todo esto, por lo que solo tratar de encontrar la mejor manera parece que debería ser simple.
Puede usar simplemente useRouter de nextjs así
import { useRouter } from 'next/router'; ... const { asPath } = useRouter(); ... return ( <div className={className}>http://example.com{asPath}</div> )Además, puede guardar http://example.com en sus variables de entorno
Si ha configurado una ruta base, debe obtenerla
import { useRouter, basePath } from 'next/router';Más información sobre useRouter aquí
Almacene window.location.href como una variable. entonces, como: const URL = window.location.href y luego simplemente coloque {URL} aquí:
/** * Share dropdown component */ export const ShareDropdown: React.FC<{ className: string }> = ({ className, }) => { const URL = window.location.href return ( <div className={className}>{URL}</div> ) }