Javascript 如何使用React路由器嵌套链接？

我有以下错误显示在

if（isReply&&detailView）{
replyUsername=(
答复{parentUsername}

{username}

{date}

{text}

{repress.length}{likes.length}

)
} 

有办法解决这个问题吗？单击空白链接到状态本身，我还希望能够链接到用户名。

链接（或锚定标记）不能是其他锚定标记的子项。如果只想渲染3个链接，则需要取消渲染后两个链接，并在与第一个链接相同的级别上进行渲染。使用React片段返回单个节点

if (isReply && detailView) {
  replyUsername = (
    <>
      <Link to={`/${username}/status/${id}`}>Place some link text here</Link>
      <Link to={`/${parentUsername}`}>
        <p>Replying to {parentUsername}</p>
      </Link>
      <Link to={`/${username}`}>
        <p>{username}</p>
      </Link>
      <p>{date}</p>
      <p>{text}</p>
      <p>{replies.length} {likes.length}</p>
    </>
  )
}

---

这里的问题不是react路由器嵌套，而是正常的文档结构和

标记

一般的答案是，有一个包含链接的链接是没有意义的，这对可访问性是有害的。（JSX中的每个

标记都在DOM中生成一个

标记。）

最有可能的情况是，您应该重新调整布局，以便有一个包含日期、文本和其他信息的链接，在该链接下，有两个您想要的其他链接

为了让它按照您的意愿工作，我认为您需要这样一个容器元素，以便按照您想要的方式定位事物：

if (isReply && detailView) {
  replyUsername = (
    <div class="container">
      <Link to={`/${username}/status/${id}`}>
        <p>{date}</p>
        <p>{text}</p>
        <p>{replies.length} {likes.length}</p>
      </Link>
      <Link to={`/${parentUsername}`}>
        <p>Replying to {parentUsername}</p>
      </Link>
      <Link to={`/${username}`}>
        <p>{username}</p>
      </Link>
    </div>
  )
}

if（isReply&&detailView）{
replyUsername=(
{date}

{text}

{repress.length}{likes.length}

答复{parentUsername}

{username}

)
}

---

通常，如果可以，您希望避免在其他可单击元素中包含可单击元素（在屏幕截图中，看起来您可以）使您的选项卡顺序和可访问性有意义。

您只想显示3个链接吗？如果您使用

来处理单击事件，您还应该指定

tabindex

，使其保持键盘可访问。@Ryan当然，绝对，但是由于可访问性在最初的问题中不是一个问题，所以我没有具体地解决它。在这种情况下，应该添加一个使用相同回调函数的

onPress

处理程序，以保持其键盘焦点和可访问性。

if (isReply && detailView) {
  replyUsername = (
    <div onClick={() => history.push(`/${username}/status/${id}`)} tabIndex={0}>
      <Link to={`/${parentUsername}`}>
        <p>Replying to {parentUsername}</p>
      </Link>
      <Link to={`/${username}`}>
        <p>{username}</p>
      </Link>
      <p>{date}</p>
      <p>{text}</p>
      <p>{replies.length} {likes.length}</p>
    </div>
  )
}

if (isReply && detailView) {
  replyUsername = (
    <div class="container">
      <Link to={`/${username}/status/${id}`}>
        <p>{date}</p>
        <p>{text}</p>
        <p>{replies.length} {likes.length}</p>
      </Link>
      <Link to={`/${parentUsername}`}>
        <p>Replying to {parentUsername}</p>
      </Link>
      <Link to={`/${username}`}>
        <p>{username}</p>
      </Link>
    </div>
  )
}