Reactjs 警告：ValidatedMonitoring（…；）：<；a>；不能显示为<；的后代；a>；

我正在使用React路由器dom链接组件。它基本上是推特的主页。我希望能够在一个div组件中有两种类型的链接。一个是链接到用户的个人资料，另一个是链接到帖子。我目前收到警告，目前无法找到解决方案。以下是作为参考的屏幕截图：

我理解这里的问题，我的帖子链接是父元素，我在其中添加了两个用户链接组件，因为当用户单击帖子中的任何内容时，除了用户的个人资料照片和用户名之外，都应该能够访问帖子页面。有没有更聪明的方法来实现这一点并保持这样的链接

代码：

{posts？.map（（post）=>(
{post.user.name}
{post.body}
))}

是的，将锚定标记放在另一个锚定标记中是一种错误的做法。但是根据您的需求，您可以使用带有react路由器dom历史api的基本按钮

一个简单的例子：

从'react router dom'导入{Link，useHistory}
常量应用=（）=>{
const history=useHistory（）
//不要忘记[role='link']，否则它将不允许像“在新选项卡中打开”这样的功能。因此，它的行为如下
返回(
history.push（“/user/1”）
}
>
无名氏
这里有一些使用信息
用户帖子
)
}

{posts?.map((post) => (
          <Link
            className={classes.link}
            key={post.user.id}
            to={`/posts/${post.id}`}
          >
            <div className={classes.post}>
              <Link to={`/users/${post.user.id}`}>
                <img
                  className={classes.profileImage}
                  src={DefaultLogo}
                  alt="default-profile"
                />
              </Link>
              <article className={classes.postDetails}>
                <Link
                  className={classes.link}
                  to={`/users/${post.user.id}`}
                >
                  <Typography
                    variant="subtitle1"
                    className={`${classes.postTitle} ${classes.content}`}
                  >
                    {post.user.name}
                  </Typography>
                </Link>
                <Typography
                  variant="subtitle1"
                  className={`${classes.postText} ${classes.content}`}
                >
                  {post.body}
                </Typography>
              </article>
            </div>
          </Link>
        ))}