reactjs 在Next js中使用userouter复制当前url

46scxncf 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(132)

我使用userouter获取当前页面的url并使用剪贴板进行复制，但复制的内容是object对象，我希望它返回一个url。我的代码中有什么问题

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

reactjs

来源：https://stackoverflow.com/questions/70125627/copy-current-url-with-userouter-in-next-js

2条答案

按热度按时间

z31licg01#

useRouter返回路由器对象。
在浏览器端，您可以只查询location.href以获得当前完整URL。
如果你在服务器端，你将不得不采取各种部分和建立链接自己。你将需要protocol和host（不在路由器对象中），则从路由器对象中可以获得basePath、asPath（路径与查询、但没有basePath或locale）。最好参考您使用的Next版本的文档，以查看您可以访问路由器对象的哪些属性。

赞(0）回复(0）举报 2022-12-12

llycmphe2#

你不需要使用useRouter（）。在Next JS中，你正在编写React，这就是为什么你可以用纯JavaScript的方式实现它：

const copyToClipboard = e => {
  navigator.clipboard.writeText(window.location.toString())
}

然后，您可以移至按钮并呼叫方法：

<button copyToClipboard={currentLink}>
   Copy
</button>

或者，您可以使用React的onClick（）调用该方法：

<button onClick={copyToClipboard}>
   Click to copy current url to clipboard
</button>

你可以从这个答案中得到很多其他的建议：In reactJS, how to copy text to clipboard?。
快乐编码...

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 在Next js中使用userouter复制当前url

2条答案

相关问题

热门标签

最新问答