react-router-dom(ReactJS) 嵌套<link>成分

Question

你好 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>
  )
}

错误： index.js:1 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

一切正常，我得到了一个带有文本和标签的容器，当我点击容器时，它会将我重定向到 /article/[ARTICLE_ID]，当我点击它的标签时，它会将我重定向到 /tag /[TAG_ID]，唯一的问题是，react 编译器在控制台中给我一个错误，说你不能把链接放在链接中，但它可以编译并工作。 有什么办法可以解决这个错误，或者我可以忽略它（我不喜欢什么）？

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

Answer 1

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

解决此问题的一种方法是将嵌套的Link移出父Link ，并通过 CSS （可能使用负边距或绝对定位），您可以在视觉上将嵌套的Link移动到当时的父Link上。

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

Answer 2

您正在看到警告..

<a>不能作为<a>的后代出现

.. 作为另一个锚标签（此处由Link呈现）不是有效的 HTML。 请参阅此相关帖子。

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

并在按钮单击时使用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>

output 的快照：

Answer 3

是的，这是正确的行为，因为浏览器无法呈现嵌套属性。 您需要在 Route 组件中嵌套 Links。 这是一个工作示例： https://reactrouter.com/web/example/nesting