ReactJS、Router、Redux：如何将 HTML <a/> 用作 <Link/>？答案

【问题标题】：ReactJS, Router, Redux: How to use HTML <a/> as <Link/>?ReactJS、Router、Redux：如何将 HTML <a/> 用作 <Link/>？
【发布时间】：2016-12-27 00:17:15
【问题描述】：

有没有办法让 HTML <a href=""> Home </a> 像

那样工作

<Link to={`Home`} style={{textDecoration:'none'}}>
    Home
</Link>

我尝试将<a/> 嵌套在链接中，但出现以下错误：Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See NavBar > Link > a > ... > a.

编辑 - 代码片段

<Link to={`Home`} style={{textDecoration:'none'}}>
    <a href="">Home</a>
</Link>

【问题讨论】：

你到底想达到什么目的？几乎就是。
@QuietBits 的样式实现方式不同。例如，如果我将替换为，它的位置也会不同。
能否提供一个代码 sn-p 和检查这些链接时在 DOM 中看到的内容的屏幕截图？
@QuietBits 使用代码 sn-p 更新了原始帖子。并要求截图，你能澄清一下检查链接吗？
您截取的代码有误。您不能将嵌套在中，它们是相同的。请阅读 React Router 文档，他们有很好的例子和指导方针：github.com/reactjs/react-router

标签： javascript html reactjs react-router react-jsx

【解决方案1】：

Link 组件作为标签呈现给 DOM，因此针对泛型的 css 也应该适用于 Link。您还可以为链接指定一个自定义的 className 以实现正确的样式。

在 a 中放置一个标签肯定是错误的，因为这会在 DOM 中嵌套两个锚标签，这不是有效的 HTML5，这会触发你得到的 React 错误。

【讨论】：