[SPA 미니 프로젝트 中] antd Menu에 링크 연결하기(5.0 버전 이슈)

SPA 미니프로젝트 주제 캠핑장예약사이트

 

React SPA 미니 프로젝트 중에  처음으로 ant-design의 Menu를 써봤는데 디자인 커스텀까지는 쉽게하고

이제 해당 컴포넌트 링크를 연결하려는데 items1을 return 전에 .map으로 뽑아서 메뉴에 items ={items1} 리턴도 해보고

 

아래처럼 아예 객체속성에 하나하나 href 키에 링크를 넣고 return 메뉴에서 map으로 뽑기도해봤지만

클릭해도 반응이 없었다..

 

const items1 = [
  { key: 'notice', label: '공지사항', href: '/notice' },
  { key: 'booking', label: '캠핑예약', href: '/booking' },
  { key: 'mypage', label: '마이페이지', href: '/mypage' },
];

---

            <Menu mode="horizontal" defaultSelectedKeys={[0]} items={items1} href={items1.href}>
              {items1.map(item => (
                <Menu.Item key={item.key}>
                  <Link href={item.href}><a href={item.href}>{item.label}</a></Link>
                </Menu.Item>
              ))}
            </Menu>

(여러 시도들을 합쳐놓은 혼종..)

 

<a>태그로 감싸서 코드작성해보고,  react-rounter-dom의 Link도 공부해와서 써봤지만, 이 Menu항목에 링크를 아무리 눌러도 연결이 되지가 않았다ㅜㅜ

많은 블로거들의 글과 AI의 힘까지 빌려봤지만 틀린 코드가 아니란 것만 반복

useState / onClick속성까지는 필요가 없는데 왜 안되지하며 혼자 해결해보고 싶은 맘에 주말 밤 4시간 동안 이거 하나를 잡고 달려버렸다..

 

결국 초심으로 돌아가자는 마음으로 ant-design 공식홈페이지에 가봤더니...  아주 작게 껴있는 링크Menu 5.0 튜토리얼..

 

const items1 = [
  {
    key: 'notice',
    label: <a href='/notice'>공지사항</a>,
  },

  {
    key: 'booking',
    label: <a href='/booking'>캠핑예약</a>,
  },
  {
    key: 'mypage',
    label: <a href='/mypage'>마이페이지</a>,
  },
];

  <Menu mode="horizontal" defaultSelectedKeys={[0]} items={items1} />

 

 

투자한 시간에 비해서는 솔직히 조금은 허무했지만, 5.0버전에서는 이렇게 사용해야겠다가 누구보다 확실히 각인됐다.

결국 해결도 했고 덕분에 다른 공부가 더 됐으니 만족..!