[React&antd] Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

프론트 팀원들끼리 같이 antd 적용하여 UI를 꾸미고 있었는데 어느 정도 꾸미고 실행해보니까 갑자기 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.라는 에러가 떴다.

렌더링은 잘 됐지만 개발자 도구에서 뜬 오류였다

 

 

 

 

먼저 수정 전 코드를 보자

Home.js 

import React from 'react';
import {Link} from 'react-router-dom';
import {Button} from 'antd-mobile';
import 'antd/dist/antd.css';
import 'antd-mobile/dist/antd-mobile.css';

function Home() {
    return (
	<div>
          <Link to='/login'>
        	<Button type="ghost" inline style={{marginRight: '4px'}}>회원</Button>
          </Link>
          <Link to='/coffee'>
        	<Button type="ghost" inline style={{marginRight: '4px'}}>비회원</Button>
       	  </Link>
	</div>
    );
}

export default Home;

 

 

 

 

 

오류 메시지에 <a> 태그가 있는 것을 보고 <a>태그가 하이퍼링크를 거는 태그니까 그 부분에서 문제가 생겼나? 싶어 Button 태그를 지우고 돌려봤더니 에러가 사라졌었다. 문서들이 많이 있는 것은 아니라서 정확하지는 않지만 일단 내 생각으로는 Link와 antd에서 제공하는 Button이 중첩되는 기능을 가지고 있어서 <a> 태그 중첩으로 오류가 뜨는 것 같았다. 따라서 <Link>를 지우고 Button에서 라우팅이 가능하도록 코드를 수정하니 오류가 뜨지 않고 렌더링이 잘 되더라!

 

 

 

Home.js (수정 후)

import React from 'react';
import {Link} from 'react-router-dom';
import {Button} from 'antd-mobile';
import 'antd/dist/antd.css';
import 'antd-mobile/dist/antd-mobile.css';

function Home() {
    return (
        <Layout>
	<div>
            <Button href='/login' type="ghost">회원</Button>
            <Button href='/coffee' type="ghost">비회원</Button>
   	</div>
    );
}

export default Home;

 

 

antd에서 제공하는 <Button> 속성 중에서 href를 사용하여 <Link>와 같은 일을 하도록 처리했다.

 

 

 

 

(전 블로그에서 2021.02.27 16:13에 작성된 글입니다.)