React 点击Card跳转外部新标签页时如何保留原有Project组件正常展示

当前实现的逻辑链路存在设计冲突：

• CardItem组件默认基于传入的path属性触发React Router本地路由跳转
• 点击卡片后本地地址跳转到/cnn-project，匹配对应路由规则后，当前页面被替换为该路由返回的null内容
• 承载卡片的Project组件因路由匹配变更被卸载，最终页面仅剩下全局挂载的Header和Footer

• 调整CardItem的传值逻辑，移除会触发本地跳转的path属性，新增专门传递外链地址的专属参数：

  <CardItem
    src='images/img-9.jpg'
    text='Sentiment Analysis Using CNN'
    label='Deep Learning'
    externalUrl='https://www.w3schools.com'
  />
  

• 修改CardItem内部的点击事件处理逻辑，外链场景独立处理，完全不触发本地路由跳转：

  // CardItem内部点击处理示例
  const handleCardClick = () => {
    // 存在外链参数时，直接在新标签页打开对应地址
    if (externalUrl) {
      window.open(externalUrl, '_blank', 'noopener,noreferrer')
      return
    }
    // 保留原有内部路由的跳转逻辑
    if (path) {
      navigate(path)
    }
  }
  

• 删除冗余路由配置，移除/cnn-project对应的路由项，从根源上避免本地路由匹配到空组件的情况。

关键提醒：禁止用“路由组件内触发新窗口打开再返回null”的模式处理外链跳转，这类模式本质上占用了本地路由的匹配位置，只要触发本地导航就一定会卸载当前页面的业务组件，无法实现保持当前页面展示的效果。

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