1

Olá, estou tentando usar o componente Link do react-router-dom para gerar links em uma tabela de dados, porém, estou enfrentando o seguinte problema:

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

O código

function mapStateToProps(state) {
  return {
    pages: state.pages.map((page, index) => {
      let dropdownBtnOpts = [{
        text: 'Editar',
        to: '/admin/pages/' + page._id + '/edit',
        icon: 'edit'
      }, {
        text: 'Excluir',
        icon: 'delete',
        onClick: () => {
          handleDeletePage(page._id)
        }
      }];

      page._id = page._id.toString();
      page.title = page.title;
      page.url = <Link to={page.url}>{page.url}</Link>;
      page.published = page.published;
      page.actions = <DropdownButton state='default' size='small' options={dropdownBtnOpts}>Opções</DropdownButton>;

      return page;
    })
  };
}

O meu problema se econtra na linha:

page.url = <Link to={page.url}>{page.url}</Link>;

O resultado é algo parecido com:

<Link to=''> <Link to='/url'></Link> </Link>

Algum esclarecimento será bem vindo, obrigado.

1 Resposta 1

1

Tive um problema parecido com este utilizando o Material-UI 1.0-beta. O problema que você está tendo é pelo fato de você estar renderizando uma tag do tipo link (<a>) uma dentro da outra, o que é uma inválida marcação HTML e o React dá este warning.

Veja esta parte do teu código:

let dropdownBtnOpts = [{
    text: 'Editar',
    to: '/admin/pages/' + page._id + '/edit',
    icon: 'edit'
  }, 

e logo abaixo você renderiza o componente DropdownButton que pelo que me parece é um componente que gera Link.

Se você observar, na árvore de componentes gerada que você colocou aqui está a exatamente a marcação HTML problemática:

<Link to=''>
  <Link to='/url'></Link>
</Link>

Como pode ver, aí é um Link dentro do outro e isto é inválido. Para contornar isto, mude o que o tipo de componente mais externo para, por exemplo, uma div.

Então uma saída válida deveria ser:

<div>
  <Link to='/url'></Link>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .