警告：validateDOMNesting(…)：<a> 不能显示为 <a>

Question

我正在使用 React router dom Link 组件。它基本上是 Twitter 的主页。我希望能够在一个 div 组件中拥有两种类型的链接。一个是转到用户个人资料的链接，另一个是转到帖子的链接。我目前收到警告，暂时无法找到解决方案。这是截图作为参考：

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

代码：

{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>
        ))}

Answer 1

是的，将锚标签放在另一个锚标签内会误导一种糟糕的做事方法。但考虑到您的要求，您可以使用带有 React router dom 历史 api 的基本按钮。

一个简单的例子：

import {Link, useHistory} from 'react-router-dom'

const App = () => {
  const history = useHistory()


  return (
     <a
      href='/user/1'
     >
       <h2>John doe</h2>
       <div>here are some use information</div>
       {/* Need to prevent the event bubbling */}     
       <Link role='link' to='/users/1/posts'>
           User posts
       </Link> 
     </div>
  )

}

Answer 2

🚀 为了快速解决这个问题，我们使用专用的 导航处理函数 。我们将用

<Link>

标签替换那些讨厌的

<p>

标签，并将

onClick

事件处理程序连接到

<p>

标签。我们还将利用强大的

useNavigate

React hook，它可以方便地支持在导航期间将状态传递到其他组件。

👇 让您大饱眼福这个改进后的组件示例：

import { useNavigate } from "react-router-dom";

const NestedLinkSolution = () => {
  const navigate = useNavigate();

  const handleNavigation = (event: React.MouseEvent, childRoute: string) => {
    event.stopPropagation();
    navigate(childRoute);
  };

  return (
      <p
        onClick={(event) => {
          handleNavigation(event, "/parentRoute");
        }}>

        🌟 {/* Initial parts of the component */}

        <p
          onClick={(event) => {
            handleNavigation(event, "/childRoute");
          }}>

            🚗 Goto Child Route

        </p>

        {/* rest of the component */}

    </p>
  );
};

export default NestedLinkSolution;

通过这种巧妙的方法，您不仅可以优雅地解决问题，而且还可以在代码中注入一些风格。