React中Button内Link加target=_blank后按钮失效问题求助

我明白你遇到的头疼问题——在HashRouter环境下，给react-router-dom的Link组件加target="_blank"后完全失效，还不能硬编码完整HTTP URL，毕竟应用可能部署在不同基础路径下。下面给你两个实用的解决方案：

方案1：用原生<a>标签构造适配HashRouter的URL #

react-router的Link组件在处理target="_blank"结合相对路径（尤其是HashRouter的hash路由）时，偶尔会出现路径构造异常的情况。换成原生a标签，手动拼接包含hash的完整URL就能轻松解决：

步骤1：构造适配部署环境的目标URL #

先写个方法自动生成适配当前环境的URL，不用操心基础路径的问题：

const getMarkPageUrl = () => {
  // 获取当前应用的基础URL（比如部署在https://xxx.com/my-app/就会得到https://xxx.com/my-app/）
  const baseUrl = `${window.location.origin}${window.location.pathname}`;
  // 用URLSearchParams优雅处理查询参数，避免手动拼接的语法错误
  const searchParams = new URLSearchParams({
    groupId: this.state.groupId,
    unitOfferingId: this.state.unitOfferingId,
    userId: this.state.userId,
    role: this.state.role,
    groupName: this.state.selectedGroup.group_name
  });
  // 拼接HashRouter需要的完整路径：基础URL + # + 路由路径 + 查询参数
  return `${baseUrl}#/AssessmentList?${searchParams.toString()}`;
};

步骤2：替换Link为原生a标签 #

把生成的URL作为a标签的href，同时加上rel="noopener noreferrer"（这是前端安全最佳实践，防止新标签页访问当前页面的window对象）：

const markLink = (
  <a 
    href={getMarkPageUrl()}
    target="_blank"
    rel="noopener noreferrer"
    style={{ textDecoration: "none", color: "white" }}
  >
    Mark
  </a>
);

直接把这个markLink传入你的ButtonMenu组件即可，浏览器会正确在新标签页打开对应的HashRouter路由。

方案2：用React Router的history API手动打开新标签 #

如果你更习惯用React Router的原生API处理路由，也可以通过history.createHref生成正确的URL，再用window.open打开：

步骤1：用withRouter包裹组件（类组件适用） #

因为你的组件是类组件，需要先通过withRouter注入history对象：

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

class YourComponent extends React.Component {
  // ... 你的其他组件代码

  handleOpenMarkPage = () => {
    const { history } = this.props;
    // 构造路由参数对象
    const targetLocation = {
      pathname: "/AssessmentList",
      search: new URLSearchParams({
        groupId: this.state.groupId,
        unitOfferingId: this.state.unitOfferingId,
        userId: this.state.userId,
        role: this.state.role,
        groupName: this.state.selectedGroup.group_name
      }).toString()
    };
    // 用history.createHref生成适配HashRouter的完整URL
    const targetUrl = history.createHref(targetLocation);
    // 打开新标签页
    window.open(targetUrl, "_blank");
  };

  render() {
    // 把原来的Link换成可点击的span（也可以用button，样式自己调整）
    const markLink = (
      <span 
        onClick={this.handleOpenMarkPage}
        style={{ textDecoration: "none", color: "white", cursor: "pointer" }}
      >
        Mark
      </span>
    );

    return (
      <ButtonMenu 
        items={[]} 
        name={markLink} 
        working={this.state.project_archived} 
        action={() => { }} 
      />
    );
  }
}

// 用withRouter包裹组件，注入history对象
export default withRouter(YourComponent);

这个方案利用React Router的history.createHref自动处理HashRouter的路径格式，确保生成的URL适配当前部署的基础路径，完全不用硬编码HTTP前缀。

为什么原来的Link会失效？ #

在HashRouter模式下，react-router-dom v5的Link组件处理对象形式的to参数时，偶尔无法正确构造包含hash的完整URL，导致浏览器识别不了有效的跳转地址。换成原生a标签或者手动用history生成URL的方式，就能绕过这个小坑。

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