React throws Warnings when nesting NavLink - reactjs

Question

I am trying to use NavLink to build a navigation menu and I am using NavLink to implement it because of the activeClassName property.
But when I try to nest them together, to make a Drop Down Menu, warnings show up at Chrome Debugger.
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
Is there any way to remove such warnings during development, or is there any better approach for creating NavBar while keeping activeClassName style?
Thanks.
<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>
Edited on 2019-02-20
I have created a CodePen based on the answer from #JupiterAmy, but did not see what expected, can you(or someone) do some modification?
CodePen Link

Answer 1

Navlink components returns an anchor tag itself. You can see that yourself in devtools. That's the reason you are getting this error. For nested links, you should take advantage of react router dynamic routing which was introduced in v4.
To achieve this, you should have a parent component which will have the Navlink which contains the link to your Homepage. something like this.
const Parent = () => {
return (
<div>
<NavLink
to="/dashboard"
activeClassName="Activated">
GoToDashboard
</NavLink>
</div>
);
}
Now in your dashboard component you should have your nested links.
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>
);
}
Now, when you click this Links from inside of Dashboard component, you will get the links as expected.
/dashboard/item..

Answer 2

Check out the below code and image for your reference.
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'));
For some reason, I wasn't able to get the same run in a codepen. You can try to run the code in your local set up. It works and I hope serves your purpose.