Uso userouter para obtener la URL de la página actual y uso el portapapeles para copiar, pero el contenido copiado es un objeto. Espero que devuelva una URL. ¿Qué problema hay en mi código?
import CopyToClipboard from "react-copy-to-clipboard"; import React,{ useState } from "react"; import { useRouter } from "next/dist/client/router"; const clip = () => { const {asPath} = useRouter() const [state, setState] = useState({ value:{asPath}, copied: false, }); return( <> <Stack position='fixed' bottom="0" css={{ backdropFilter: 'blur(10px)' }} w="100%" h="25px"> <CopyToClipboard text={state.value} onCopy={() => setState({copied: true})}> <Box as='button' > <BsShare/> </Box> </CopyToClipboard> </Stack> </> ); }; export default clipuseRouter devuelve elobjeto del enrutador .
En el lado del navegador, solo puede consultar location.href para obtener la URL completa actual.
Si está del lado del servidor, tendrá que tomar varias partes y crear el enlace usted mismo. Necesitará el protocol y host (no en el objeto del enrutador), luego, desde el objeto del enrutador, puede obtener basePath , asPath (ruta con consulta, pero sin basePath o locale ). Es mejor consultar la documentación de la versión de Next que usa para ver a qué propiedades puede acceder en el objeto del enrutador.