I use userouter to get the url of the current page and use the clipboard to copy, but the copied content is object object I expect it return an url.What problem in my code
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 clip
useRouter returns router object.
On browser side you are able to just query location.href to get current full URL.
If you are on server side, you will have to take various parts and build link yourself. You will need protocol and host (not in router object), then from router object you can get basePath, asPath (path with query, but without basePath or locale). It is better to consult documentation for version of Next that you use to see what properties you can access on router object.