Next.js中使用useRouter复制当前URL出现object object问题求助

问题根源 #

你代码的核心问题是错误地将字符串类型的路由路径包裹成了对象存储，导致传给剪切板组件的内容是对象而非字符串，对象被强制转为字符串时就会输出[object Object]：

• 你在初始化state时写了value:{asPath}，这是ES6对象属性简写语法，实际等价于value: { asPath: asPath }，这里的value是一个包含asPath属性的对象，不是路径字符串本身。
• CopyToClipboard组件的text属性要求传入字符串类型值，你传入对象后，组件内部调用toString()方法处理时就得到了[object Object]。

修复方案 #

方案1：修改state存储结构（推荐） #

直接把路径字符串存到state中，不需要包裹成对象：

const [state, setState] = useState({
  value: asPath, // 移除asPath外层的大括号，直接存字符串
  copied: false,
});

方案2：直接使用asPath无需额外存储（更简洁） #

useRouter返回的asPath本身是响应式的，路由变化时会自动更新，完全不需要额外存到state里，代码可以简化为：

import CopyToClipboard from "react-copy-to-clipboard";
import React,{ useState } from "react";
import { useRouter } from "next/dist/client/router";
// 别忘了导入你用到的BsShare、Stack、Box组件哦

const Clip = () => {
  const {asPath} = useRouter()
  const [copied, setCopied] = useState(false);

  return(
    <Stack 
      position='fixed'
      bottom="0"
      css={{ backdropFilter: 'blur(10px)' }}
      w="100%"
      h="25px"
    >
      <CopyToClipboard text={asPath} onCopy={() => setCopied(true)}>
        <Box as='button' >
          <BsShare/>
        </Box>
      </CopyToClipboard>
    </Stack>
  );
};

export default Clip

额外提醒：React组件名建议首字母大写，避免和内置DOM标签、普通函数混淆，所以这里把clip改成了Clip。

内容的提问来源于stack exchange，提问作者彩虹一號