2

你好 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：我的英语不是我知道的最好的，但我会努力的：）

4

3 回答 3

2

您正在看到警告..

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

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

要修复它，您可以使用Linkie 锚标记和 abutton并使用 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>

输出快照：

在此处输入图像描述

于 2021-03-21T18:36:17.803 回答
1

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

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

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

于 2021-03-21T18:17:28.757 回答
0

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

于 2021-03-21T18:23:30.983 回答