如何让React菜单组件中的所有链接点击后在外部新窗口标签页打开

你当前代码仅对后缀为pdf的链接配置了新窗口打开属性，其余普通链接未添加target="_blank"配置，因此默认在当前标签页跳转，可根据需求选择以下两种解决方案：

方案1：所有菜单链接均在新窗口打开 #

直接修改Menu组件的属性配置，给所有链接补充新窗口打开的相关属性即可，修改后的代码如下：

export default function Menu(props) {
  return (
    <StyledMenu tabIndex={0}>
      <StyledMenuTitle>
        <span style={{ marginRight: '0.25rem' }}>{props.data.name} </span>
        <MenuFlyout>
          {props.data.sublinks.map((item, index) => {
            return (
              <StyledMenuItem tabindex={index} key={index}>
                <StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer">
                  <StyledTitle>{item.name}</StyledTitle>
                  {item.description && <StyledDescription>{item.description}</StyledDescription>}
                </StyledExternalLink>
              </StyledMenuItem>
            )
          })}
        </MenuFlyout>
      </StyledMenuTitle>
    </StyledMenu>
  )
}

如果需要保留PDF链接的特殊判断逻辑，只需要给非PDF分支的StyledExternalLink组件补充target="_blank" rel="noopener noreferrer"属性即可。

方案2：灵活控制单个链接的打开方式 #

如果部分链接需要在当前页打开，部分需要新窗口打开，可以给菜单配置项增加自定义标识字段：

1. 先修改src/utils/menu.js的配置，给需要新窗口打开的链接加openInNewTab字段：

const menu = [
  {
    name: 'App',
    sublinks: [
      { name: 'App Store', link: 'someLink', openInNewTab: true },
      { name: 'Play Store', link: 'someLink', openInNewTab: true },
      // 不需要新窗口打开的可以不填这个字段，默认走当前页跳转逻辑
    ]
  },
  // 其余配置保持不变
]

module.exports = menu

2. 再修改Menu组件，根据字段判断是否添加新窗口属性：

export default function Menu(props) {
  return (
    <StyledMenu tabIndex={0}>
      <StyledMenuTitle>
        <span style={{ marginRight: '0.25rem' }}>{props.data.name} </span>
        <MenuFlyout>
          {props.data.sublinks.map((item, index) => {
            // 提前判断是否需要新窗口打开：配置了openInNewTab 或者是PDF链接
            const isNewTab = item.openInNewTab || item.link.split('.').slice(-1)[0] === 'pdf'
            return (
              <StyledMenuItem tabindex={index} key={index}>
                <StyledExternalLink 
                  href={item.link} 
                  {...(isNewTab ? {target: "_blank", rel: "noopener noreferrer"} : {})}
                >
                  <StyledTitle>{item.name}</StyledTitle>
                  {item.description && <StyledDescription>{item.description}</StyledDescription>}
                </StyledExternalLink>
              </StyledMenuItem>
            )
          })}
        </MenuFlyout>
      </StyledMenuTitle>
    </StyledMenu>
  )
}

注意：使用target="_blank"时必须搭配rel="noopener noreferrer"，避免出现跨域安全风险。

内容的提问来源于stack exchange，提问作者Christoph Könekamp