Question

我在这里遇到一个非常简单的问题，我需要一些帮助。我的HTML脚本就是这个

<nav class="mainNav">
  <ul>
    <li><a href="#" class="active">δσαδσαδσαδσα</a></li>
    <li><a href="#">δσαδσαδσαδσα</a></li>
  </ul>
</nav>

我想使用react-router中的Link标签来编写它，所以我正在编写

<ul className="main-nav">
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
</ul>

其中NavLink是一个包含以下代码的简单小部件：

export default function (props) {
  return (
    <Link
      {...props}
    />);
}

我错过了什么？我的布局与HTML脚本

不同

Answer 1

您的意思是用<a />替换<NavLink />个链接吗？

<nav className="mainNav">
  <ul>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
  </ul>
</nav>

Answer 2

您可能需要将NavLink组件放在li标记内。

<nav class="mainNav">
  <ul>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
  </ul>
</nav>

将纯HTML脚本转换为jsx

2 个答案: