reactjs - 嵌套 NavLink 时 React 抛出警告

Question

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

但是当我尝试将它们嵌套在一起以制作下拉菜单时，Chrome 调试器会出现警告。

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

有没有办法在开发过程中删除这些警告，或者有没有更好的方法来创建 NavBar 同时保持activeClassName风格？

谢谢。

<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 链接

标签： reactjsreact-router

Answer 1

查看下面的代码和图像供您参考。

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 中进行相同的运行。您可以尝试在本地设置中运行代码。它有效，我希望能达到你的目的。