嵌套NavLink

Question

由于activeClassName属性，我正在尝试使用NavLink构建导航菜单，并且正在使用NavLink实施导航菜单。

但是当我尝试将它们嵌套在一起以创建下拉菜单时，Chrome调试器上会显示警告。

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

在开发过程中是否有任何方法可以消除此类警告，或者在保持activeClassName样式的同时创建NavBar有更好的方法吗？

谢谢。

<NavLink to="/dashboard" activeClassName="Activated">
  <div className="dropdown">
    <label>Items</label>
    <div className="dropdown-content">
      <NavLink exact to="/dashboard/Item1" activeClassName="Activated">
        Item1
      </NavLink>
      <NavLink exact to="/dashboard/Item2" activeClassName="Activated">
        Item2
      </NavLink>
      <NavLink exact to="/dashboard/Item3" activeClassName="Activated">
        Item3
      </NavLink>
    </div>
  </div>
</NavLink>

---

编辑于2019-02-20

我已经基于@JupiterAmy的回答创建了一个CodePen，但没有看到期望的结果，您（或某人）可以做一些修改吗？

CodePen Link

Answer 1

Navlink组件本身返回一个定位标记。您可以在devtools中看到自己。这就是您收到此错误的原因。对于嵌套链接，您应该利用v4中引入的react router动态路由。

要实现此目的，您应该有一个父组件，该组件将具有Navlink，该Navlink包含指向您首页的链接。像这样的东西。

const Parent = () => {
    return (
        <div>
            <NavLink 
              to="/dashboard" 
              activeClassName="Activated">
              GoToDashboard
            </NavLink>
        </div>
    );
}

现在在仪表板组件中，您应该具有嵌套的链接。

const Dashboard = () => {
    return (
        <div className="dropdown-content">
          <NavLink exact to=`${match.url}/item1` activeClassName="Activated">
            Item1
          </NavLink>
          <NavLink exact to=`${match.url}/item2` activeClassName="Activated">
            Item2
          </NavLink>
          <NavLink exact to=`${match.url}/item3` activeClassName="Activated">
            Item3
          </NavLink>
       </div>
    );
}

现在，当您从仪表板组件内部单击此链接时，您将按预期获得链接。

/dashboard/item..

Answer 2

查看以下代码和图像以供参考。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';

const Root = () => {
   return (
    <BrowserRouter>
      <Parent />
    </BrowserRouter>
  );
};

const Parent = () => {
    return (
        <div>
            <NavLink className="dropdown"
              to="/dashboard" 
              activeClassName="Activated">
              GoToDashboard
            </NavLink>
        <Route path="/dashboard" component={Dashboard} />
        </div>
    );
}

const Dashboard = () => {
    return (
        <div className="dropdown-content">
          <NavLink to="/dashboard/item1" activeClassName="Activated">
            Item1
          </NavLink>
          <NavLink  to="/dashboard/item2" activeClassName="Activated">
            Item2
          </NavLink>
          <NavLink  to="/dashboard/item3" activeClassName="Activated">
            Item3
          </NavLink>
         <Route path="/dashboard/item1" component={Item1} />
         <Route path="/dashboard/item2" component={Item2} />
         <Route path="/dashboard/item3" component={Item3} />
       </div>
    );
}

const Item1 = () => {
    return (
        <div>
            <h1>Item1</h1>
        </div>
    );
}

const Item2 = () => {
    return (
        <div>
            <h1>Item2</h1>
        </div>
    );
}

const Item3 = () => {
    return (
        <div>
           <h1>Item3</h1>
        </div>
    );
}


ReactDOM.render(<Root />, document.getElementById('app'));

由于某种原因，我无法在Codepen中进行相同的运行。您可以尝试在本地设置中运行代码。它有效，希望能达到您的目的。