如何在ReactJS中分享当前URL？实现剪贴板复制的方法及兼容性问题

我来给你梳理一下实现这个功能的完整方案，同时聊聊兼容性问题～

首先你找对了方向：用this.props.history.location.pathname（类组件）或者useHistory Hook（函数组件）拿到路由路径，再拼接window.location.origin就能得到完整的当前URL，这一步完全没问题。

接下来重点说复制到剪贴板的实现，目前有两种主流方案，推荐结合使用以兼顾兼容性：

一、优先使用原生Clipboard API（现代浏览器首选） #

这个API是现在的标准方案，用法简洁且更可靠。下面是类组件的示例代码：

class CopyUrlButton extends React.Component {
  copyUrlToClipboard = async () => {
    // 拼接完整URL
    const fullUrl = window.location.origin + this.props.history.location.pathname;
    try {
      // 调用Clipboard API写入文本
      await navigator.clipboard.writeText(fullUrl);
      alert('URL已成功复制到剪贴板！');
    } catch (err) {
      console.error('Clipboard API复制失败，尝试降级方案:', err);
      // 降级到旧方法
      this.fallbackCopyToClipboard(fullUrl);
    }
  };

  // 降级方案：创建临时textarea元素实现复制
  fallbackCopyToClipboard = (text) => {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    // 把textarea放到可视区域外，避免影响页面
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    // 选中textarea内容
    textArea.focus();
    textArea.select();
    try {
      // 执行复制命令
      const successful = document.execCommand('copy');
      if (successful) {
        alert('URL已成功复制到剪贴板！');
      } else {
        throw new Error('复制命令执行失败');
      }
    } catch (err) {
      console.error('降级方案也失败了:', err);
      alert('复制失败，请手动复制URL');
    }
    // 移除临时元素
    document.body.removeChild(textArea);
  };

  render() {
    return (
      <button onClick={this.copyUrlToClipboard}>复制当前URL</button>
    );
  }
}

如果是函数组件，用useHistory Hook替代this.props.history即可：

import { useHistory } from 'react-router-dom';

function CopyUrlButton() {
  const history = useHistory();

  const copyUrlToClipboard = async () => {
    const fullUrl = window.location.origin + history.location.pathname;
    try {
      await navigator.clipboard.writeText(fullUrl);
      alert('URL已成功复制到剪贴板！');
    } catch (err) {
      console.error('Clipboard API复制失败，尝试降级方案:', err);
      fallbackCopyToClipboard(fullUrl);
    }
  };

  const fallbackCopyToClipboard = (text) => {
    // 和上面的降级函数逻辑完全一致
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const successful = document.execCommand('copy');
      successful ? alert('URL已成功复制到剪贴板！') : alert('复制失败，请手动复制URL');
    } catch (err) {
      console.error('降级方案也失败了:', err);
      alert('复制失败，请手动复制URL');
    }
    document.body.removeChild(textArea);
  };

  return <button onClick={copyUrlToClipboard}>复制当前URL</button>;
}

二、浏览器兼容性说明 #

两种方案的兼容性各有侧重，结合使用可以覆盖绝大多数场景：

• Clipboard API：支持Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+，完全满足现代浏览器需求，但IE浏览器完全不支持。
• document.execCommand('copy')：这个方法虽然已被标记为废弃，但目前所有主流浏览器（包括IE11）都还能正常工作，作为降级方案可以完美兼容老版本浏览器。

简单来说，你的用户如果主要使用现代浏览器，用Clipboard API就够了；如果需要兼容IE等老浏览器，加上降级方案就万无一失了。

内容的提问来源于stack exchange，提问作者James