react-router-dom(ReactJS) 嵌套 <Link /> 组件

Question

你好 React 开发者，
我一直在研究多站点 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]，唯一的问题是，反应编译器在控制台中给我一个错误，说你不能把 Link 放在 Link，但它编译并工作。有什么办法可以解决这个错误，或者我可以忽略它（我不喜欢的）？

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

Answer 1

你说编译器给你提到的错误，但它不是错误，它明确指出它是警告。

解决此问题的一种方法是将嵌套的 Link 移出父级 Link，并通过 CSS（可能使用负边距或绝对定位），您可以直观地将 then-nested Link 移动到 then-parent Link.

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

Answer 2

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

Answer 3

您正在看到警告..

<a> cannot appear as a descendant of <a>

.. 作为锚标记（由 Link 呈现）在另一个标记内是无效的 HTML。参见。

要修复它，您可以使用 Link 即锚标记和 button 并使用 CSS 使按钮看起来像 link，（例如，如果使用bootstrap - "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>

输出快照：

react-router-dom(ReactJS) 嵌套 <Link /> 组件

react-router-dom(ReactJS) nesting <Link /> components

javascript

reactjs

react-router-dom

react-link