Реакция выдает предупреждения при вложении NavLink

Question

Я пытаюсь использовать NavLink для создания меню навигации, и я использую NavLink для его реализации из-за свойства activeClassName.

Но когда я пытаюсь объединить их вместе, чтобы сделать выпадающее менюМеню, предупреждения отображаются в Chrome Debugger.

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

Я создал CodePen на основе ответа от @JupiterAmy, но не увидел ожидаемого, вы (или кто-то еще)) Есть ли какие-то модификации?

CodePen Link

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'));

По какой-то причине я не смог получить такой же прогон в коде.Вы можете попробовать запустить код в вашей локальной настройке.Это работает, и я надеюсь, что служит вашей цели.

Answer 2

Компоненты Navlink возвращают сам тег привязки.Вы можете видеть это в devtools.Вот почему вы получаете эту ошибку.Для вложенных ссылок вы должны использовать динамическую маршрутизацию реакции маршрутизатора, которая была представлена ​​в v4.

Для этого у вас должен быть родительский компонент, который будет иметь 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, вы получитессылки, как и ожидалось.

/dashboard/item..