React-router-dom(ReactJS) вложение компонентов <Link />

Привет, разработчики React,
я работал над проектом реагирования на несколько сайтов, но теперь у меня возникла небольшая проблема, которую я не знаю, как исправить. Моя проблема заключается в следующем:
у меня есть компонент, который выглядит так:

      import React from 'react'
import { Link } from 'react-router-dom'

export default function MyComponent({tag, Text, id}) {
  return (
    <Link to={"/article/" + id}>
      <div>
        <p>{Text}</p>
        <Link to={"/tags/" + tag.text}>{tag.text}</Link>
      </div>
    </Link>
  )
}

Ошибка: index.js:1 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Все работает как надо, у меня есть контейнер с текстом и тегом, когда я нажимаю на контейнер, он перенаправляет меня в / article / [ARTICLE_ID], а когда я нажимаю на его тег, он перенаправляет меня в / tag / [TAG_ID], единственная проблема в том, что компилятор реакции выдает мне ошибку в консоли, говоря, что вы не можете поместить ссылку в ссылку, но она компилируется и работает. Есть ли способ обойти эту ошибку или я могу ее игнорировать (чего бы мне не хотелось)?

ps: мой английский не самый лучший, но я буду над ним работать :)

Источник

3 ответа

Решение

Вы сказали, что компилятор выдает указанную ошибку, но это не ошибка, в нем четко указано, что это предупреждение.

Один из способов обойти это - переместить вложенные элементы из родительского элемента, и через CSS (используя, возможно, отрицательный запас или абсолютное позиционирование) вы визуально перемещаете вложенные элементы в родительский элемент. .

Таким образом, семантически вы все делаете правильно, при этом добиваясь того, чего визуально хотели.

Источник

Вы видите предупреждение ..

не может быть потомком <a>

..как якорный тег (отображаемый здесь) внутри другого тега не является допустимым HTML. См. Этот связанный пост .

Чтобы исправить это, вы можете использовать Link т.е. тег привязки и button и сделайте кнопку похожей на ссылку с помощью CSS (например, при использовании начальной загрузки - классы "btn btn-link"):

И использовать preventDefault и stopPropagation по нажатию кнопки:

      <Link to="/page1">
  <div>
    <p>Page1</p>
    <button
      className="btn btn-link px-0"
      onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        history.push('/page2')
      }}
    >
      Page2
    </button>
  </div>
</Link>

Снимок вывода:

Источник

Да, это правильное поведение, потому что браузер не может отображать вложенные атрибуты. Вам необходимо вложить ссылки в компонент Route. Вот рабочий пример: https://reactrouter.com/web/example/nesting

Источник
Другие вопросы по тегам