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

我正在尝试在CreateReat应用程序中使用react路由器和reactstrap 路由页面我需要使用reactstrap的状态，因此我将路由器从变量转换为类。我收到以下警告： 警告：ValidatedMonitoring（…）：

不能显示为的后代。

我不知道该怎么做，我需要用reactstrap来设计路由器导航，所以我做了下面你看到的

这不起作用的原因有很多：

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

anywords

（一堆不相关的li）
随便说
（然后是上面的更多内容）

---

除了几个li在随机时间相互靠近，我有时不得不刷新页面，而不是正常的行为（自动刷新）和控制台中收到的警告消息，没有什么不好的事情发生，但当我看到这个问题时，我发现我不应该这样做。

这是导致错误的代码

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

anywords

转换成

<a><a></a></a>

所以你得到了错误

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

警告：validateDOMNesting（…）：不能显示为的后代

要解决这个问题，只需使用以下方法之一

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

anywords

或者

anywords

将

作为

道具（以前的componentClass）添加到原始导航链接中，以保持样式，同时关闭警告

或

原件：

anywords

新的：

---

anywords

我想建议一种替代解决方案，它不仅能解决您的问题，还能给您带来所需的结果。无论如何，其他人也像我一样偶然发现了这篇文章

---

使用react router dom提供的Link jsx元素，但向其添加

classname=“nav Link”

。这将为您提供react-strap使用的NavLink jsx的样式。

Thanx第二个可用，但用户界面现在混乱，这就是我首先使用react-strap的原因，是否有任何方法修改第二个，以便我可以在其中使用react-strap链接？@Amr如果您不必仅从react-strap使用NavLink，那么“react-router dom”包本身为您提供了NavLink，请使用“react router dom”中的导入{NavLink}。这并没有解决我的错误，我使用的是material ui，我已经删除了所有Link/Nav.Link标记，仍然存在错误persists@AdityaPatnaik你能提供工作软糖吗？将尝试解决您的查询。@AdityaPatnaik，您必须从中导入它。如果是导入问题，则会引发导入错误。不是吗？这对我来说是最干净的解决方案。

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>