Javascript react路由器dom（ReactJS）嵌套<；链接/>；组件

大家好，
我一直在做一个多站点的react项目，但现在我遇到了一个小问题，我不知道如何解决。我的问题如下：
我有一个组件，看起来像：

import React from 'react'
import { Link } from 'react-router-dom'

export default function MyComponent({tag, Text, id}) {
  return (
    <Link to={"/article/" + id}>
      <div>
        <p>{Text}</p>
        <Link to={"/tags/" + tag.text}>{tag.text}</Link>
      </div>
    </Link>
  )
}

从“React”导入React
从“react router dom”导入{Link}
导出默认函数MyComponent（{tag，Text，id}）{
返回(
{Text}

{tag.text}
)
}

错误：

index.js:1警告：validateDOMNesting（…）：不能显示为的后代。

一切都正常工作，我得到了一个包含文本和标记的容器，当我点击容器时，它会将我重定向到/article/[article\u ID]，当我点击它的标记时，它会将我重定向到/tag/[tag\u ID]，唯一的问题是，react编译器在控制台中给我一个错误，说你不能在链接中放置链接，但它编译并运行。有没有办法绕过这个错误，或者我可以忽略它（我不喜欢的）

---

ps：我的英语不是我所知道的最好的，但我会努力的：）

你说编译器给了你提到的错误，但它不是一个错误，它清楚地表明这是一个警告

解决此问题的一种方法是将嵌套的

链接

移出父

链接

，并通过CSS（可能使用负边距或绝对定位），直观地将嵌套的

链接

移动到父

链接

---

这样，从语义上讲，您在以正确的方式做事的同时，仍然实现了您在视觉上想要的效果。

是的，这是正确的行为，因为浏览器无法呈现嵌套属性。 您需要在管线组件中嵌套链接。

---

下面是一个工作示例：

您正在看到警告

要修复它，您可以使用
链接
，即锚定标记和
按钮
，并使用CSS使按钮看起来像链接（例如，如果使用引导-“btn btn链接”类）：

并在按钮上使用
preventDefault
和
stopPropagation
，单击：

<Link to="/page1">
  <div>
    <p>Page1</p>
    <button
      className="btn btn-link px-0"
      onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        history.push('/page2')
      }}
    >
      Page2
    </button>
  </div>
</Link>


第1页

{
e、 预防默认值（）
e、 停止传播（）
history.push（“/page2”）
}}
>
第2页

输出快照：

谢谢你的回复，但我的问题是，容器在其他设备上会改变其高度以实现响应。这是一个巨大的问题，如果我离开它这样吗？非常感谢这个想法！！我没想过，但这是个好主意！