React路由应用标签页复制：本地文件启动时window.open('/')失效问题

问题原因 #

在服务器环境中，window.open('/') 会被解析为应用的根路径（比如 http://localhost:3000/），但在本地文件协议（file://）下，/ 会指向系统根目录（比如 C:\ 或 /），而非应用的根目录，导致打开的路径错误，方法失效。另外，如果你的应用使用 BrowserRouter，本地文件模式下还会因为缺少服务器URL重写支持，导致路由无法正常工作。

解决方案 #

1. 直接复制当前页面的完整URL #

放弃使用相对路径 '/'，改用 window.location.href 获取当前页面的完整地址，无论服务器还是本地文件模式都能正确打开和当前页一致的标签页：

const handleDuplicateTab = () => {
  // 打开当前页面的完整URL，新标签页
  window.open(window.location.href, '_blank');
};

// 组件中使用按钮
<button onClick={handleDuplicateTab}>复制当前标签页</button>

2. 兼容React路由的本地文件模式 #

如果你的应用使用 BrowserRouter，在本地文件模式下路由会失效，建议切换为 HashRouter，它通过URL哈希值管理路由，无需服务器支持，能在 file:// 协议下正常工作：

// 替换导入的Router类型
import { HashRouter as Router } from 'react-router-dom';

// 应用路由包裹
function App() {
  return (
    <Router>
      {/* 你的路由配置和页面内容 */}
    </Router>
  );
}

这样切换后，复制的标签页也能保持当前的路由状态，在本地文件模式下正常访问对应页面。

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