경고: 검증DOMName(...): 하위 항목으로 표시할 수 없습니다.

경고: 검증DOMName(...): 하위 항목으로 표시할 수 없습니다.

사용하려고 합니다.react-router와 함께reactstrap와 함께create-react-app.

라우팅 페이지에서는, 다음의 스테이트를 사용할 필요가 있었습니다.reactstrap그래서 라우터를 변수에서 클래스로 변환했는데 다음 경고가 나타납니다.

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

어떻게 해야 할지 모르겠어요.라우터 네비게이션을 스타일링할 필요가 있었습니다.reactstrap그래서 이렇게 했어요.

<NavLink
    componentClass={Link}
    href="/contact"
    to="/contact"
    active={location.pathname === '/contact'}
>
    anywords
</NavLink>

<Navbar dark id="RouterNavbar" expand="md">

    <NavbarBrand id="NavBrand"href="#x">
        <ul>
            {/* a bunch of <li></li> */}
        </ul>
    </NavbarBrand>

    <NavbarToggler id="NavBarToggler" onClick={this.toggle1.bind(this)} />

    <Collapse isOpen={this.state.isOpen1} navbar>

    <Nav className="ml-auto" navbar>

    <NavItem>
        <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
    </NavItem>

{/* just more of the above */}

몇 가지 이외에는<li>임의의 시간에 서로 가까이 접근하거나 핫 새로고침이 작동하지 않거나 콘솔에 표시되는 경고 메시지는 아무 문제가 없지만 이 문제에 대해 읽었을 때 이렇게 해서는 안 된다는 것을 알게 되었습니다.

이것이 에러의 원인이 되는 코드입니다.

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

이 값은

<a><a></a></a>

그래서 에러가 나고 있어요.

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

이 문제를 해결하려면 다음 중 하나를 사용하십시오.

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

아니면

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>

를 추가합니다.as소품(구)componentClass)를 원래대로 되돌립니다.NavLink경고음을 낮추면서 스타일을 유지합니다.

문서 참조

또는 스크린샷 보기

오리지널:

<NavLink href="#x">
  <Link id="RouterNavLink" style={None} to="/contact">anywords</Link>
</NavLink>

신규:

<Nav.Link as={Link} to="/contact">anywords</Nav.Link>

문제를 해결할 뿐만 아니라 원하는 결과를 얻을 수 있는 대안을 제안하고 싶습니다.어쨌든 다른 누군가가 나처럼 이 게시물에서 우연히 발견했어.

react router dom에서 제공하는 Link jsx 요소를 사용하지만className="nav-link"리액션 스트랩을 사용하는 NavLink jsx 스타일링을 제공합니다.

이렇게 생겼으면 좋겠는데

<Link className="nav-link" id="RouterNavLink" style={None} to="/contact">anywords</Link>

에러를 피하기 위해서 이것을 시험해 볼 수 있습니다.

<NavItem as="li"> <Link>.....

저도 같은 문제가 있었어요.왜냐하면 링크나 태그는 사용할 수 없기 때문입니다.

<a><a></a></a>

className을 네비게이션바 내 태그에 적용하고 싶어서 className을 컴포넌트 내 태그에 적용하고 해당 컴포넌트를 네비게이션바 컴포넌트로 Import했습니다.

<a className="nav-link" onClick={() => loginWithRedirect()}>
    Login
  </a>

클래스 이름 없이 탐색 템플릿에서 이 링크를 사용하는 방법입니다.

<LoginButton />

언급URL : https://stackoverflow.com/questions/55625431/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a